link3151 link3152 link3153 link3154 link3155 link3156 link3157 link3158 link3159 link3160 link3161 link3162 link3163 link3164 link3165 link3166 link3167 link3168 link3169 link3170 link3171 link3172 link3173 link3174 link3175 link3176 link3177 link3178 link3179 link3180 link3181 link3182 link3183 link3184 link3185 link3186 link3187 link3188 link3189 link3190 link3191 link3192 link3193 link3194 link3195 link3196 link3197 link3198 link3199 link3200 link3201 link3202 link3203 link3204 link3205 link3206 link3207 link3208 link3209 link3210 link3211 link3212 link3213 link3214 link3215 link3216 link3217 link3218 link3219 link3220 link3221 link3222 link3223 link3224 link3225 link3226 link3227 link3228 link3229 link3230 link3231 link3232 link3233 link3234 link3235 link3236 link3237 link3238 link3239 link3240 link3241 link3242 link3243 link3244 link3245 link3246 link3247 link3248 link3249 link3250 link3251 link3252 link3253 link3254 link3255 link3256 link3257 link3258 link3259 link3260 link3261 link3262 link3263 link3264 link3265 link3266 link3267 link3268 link3269 link3270 link3271 link3272 link3273 link3274 link3275 link3276 link3277 link3278 link3279 link3280 link3281 link3282 link3283 link3284

[Vue.js] Select option entries are only shown on the first select attempt

when using vuetify and an I’m trying to populate a select box…

…using this JSON Object:

[
{
“configurator”: {
“group”: {
“property”: [
{
“id”: “STATUS”,
“value”: [
{
“id”: “OK”,
“text”: “OK”
},
{
“id”: “NOK”,
“text”: “not OK”,
“selected”: “true”
}
]
}
]
}
}
}
]

…and I’m trying to render this component:

<v-list v-for=”(item, i) in jsonObjPruef.configurator.group.property” :key=”i”>
<v-select
v-model=”item.value”
:items=”item.value”
:label=”item.text”
/>
</v-list>

Page loads without warnings and errors and I can select from the expected values (“OK”, “not OK”).

While choosing e.g. “OK” the following warning is displayed:

[vue.js warn]: Invalid prop: type check failed for prop “items”. Expected Array, got String with value “OK”.

And now if I’m trying to select again I only can pick the value I chose before (“OK”).

The select option entries are only shown on the first select attempt.

Any idea what I’m missing here?

Solution :

tl;dr: v-model means: “where user selection is saved”. If you save it over the same exact property which holds the options, the options are gone and the <v-select> is broken.

v-model replaces jsonObjPruef.configurator.group.property with the selected option, when you select it. Which makes the <v-select> no longer have items.

You should specify a different v-model - a model property in which you store the selection, (i.e: results):

<v-list v-for=”(item, i) in jsonObjPruef.configurator.group.property” :key=”i”>
<v-select
v-model=”results[i]“
:items=”item.value”
:label=”item.text”
/>
</v-list>

In data, you need to initialize results : {}.

Now results will hold the selected results and you can place a watcher on it to trigger additional functionality when it changes. It doesn’t have to be an object, it could be an array. It depends on what you currently have.
Obviously, you can rename results to something less generic, which makes more sense in the specific example.

If you need more help, please add a mcve.

[Vue.js] How to use Vue method as image source?

in vue.js when trying to use the result from a method as the source for an image:

HTML:

<img :src=”getEnergyIcon(type)”>

JS:

data() {
return {

energyTypeMap: new Map([
[‘colorless’,‘@/assets/images/energy-icons/20px-Colorless-attack.png’],
[‘darkness’,‘@/assets/images/energy-icons/20px-Darkness-attack.png’],
[‘dragon’,‘@/assets/images/energy-icons/20px-Dragon-attack.png’],
[‘fairy’,‘@/assets/images/energy-icons/20px-Fairy-attack.png’],
[‘fighting’,‘@/assets/images/energy-icons/20px-Fighting-attack.png’],
[‘fire’,‘@/assets/images/energy-icons/20px-Fire-attack.png’],
[‘grass’,‘@/assets/images/energy-icons/20px-Grass-attack.png’],
[‘lightning’,‘@/assets/images/energy-icons/20px-Lightning-attack.png’],
[‘metal’,‘@/assets/images/energy-icons/20px-Metal-attack.png’],
[‘psychic’,‘@/assets/images/energy-icons/20px-Psychic-attack.png’],
[‘water’,‘@/assets/images/energy-icons/20px-Water-attack.png’],
])

}
},

And:

methods: {
getEnergyIcon(type){
return this.energyTypeMap.get(type.toLowerCase());
}
},

The method returns the correct path, but the image doesn’t use that path as the source:

the result to be the same as the hardcoded result, but to achieve this by using the method, because when going to use dynamic data that gives me one of the 11 types, I cannot use hardcoded paths.

there is been Googling around to find a solution but I can’t find a solution that uses a direct method as a source for the image. How do I do this?

Thanks in advance.

Solution :

Found this topic:

How to reference static assets within vue.js javascript

That mentioned the following:

In a vue.js regular setup, /assets is not served.

The images become src=”…” strings, instead.

And required me to use:

require();

Which I did like this:

data() {
return {
card: {},
energyTypeMap: new Map([
[‘colorless’,require(‘@/assets/images/energy-icons/20px-Colorless-attack.png’)],
[‘darkness’,require(‘@/assets/images/energy-icons/20px-Darkness-attack.png’)],
[‘dragon’,require(‘@/assets/images/energy-icons/20px-Dragon-attack.png’)],
[‘fairy’,require(‘@/assets/images/energy-icons/20px-Fairy-attack.png’)],
[‘fighting’,require(‘@/assets/images/energy-icons/20px-Fighting-attack.png’)],
[‘fire’,require(‘@/assets/images/energy-icons/20px-Fire-attack.png’)],
[‘grass’,require(‘@/assets/images/energy-icons/20px-Grass-attack.png’)],
[‘lightning’,require(‘@/assets/images/energy-icons/20px-Lightning-attack.png’)],
[‘metal’,require(‘@/assets/images/energy-icons/20px-Metal-attack.png’)],
[‘psychic’,require(‘@/assets/images/energy-icons/20px-Psychic-attack.png’)],
[‘water’,require(‘@/assets/images/energy-icons/20px-Water-attack.png’)],
])
}
},

It has solved my problem.

[Vue.js] Build prod dont display font - basic webpack init

I need to use font named myFontName from ttf file in production environment after launch this command :

npm run build

For this test, there is only initialize project with this command :

vue.js init webpack myProjectName

In dev environment (npm run dev) i can display and use my font. But i cant see the same font after build. However, in the production environment i can see my font in css rules (browser console).

So, font seems to be display in dev and not in production.

This is my tree project:

src
|_assets
|_components
|componentfile.vue
|_fonts
|_myFontFile.ttf

This is my dist folder tree :

dist
|_js
|_static
|_fonts
|_myFontFile.ttf

I call my font directly in my component.vue.js file :

<script scoped>
@font-face{
font-family:”myFontName”;
src: url(“./fonts/myFontFile.ttf”) format(“truetype”);
}
<script>

Webpack is nativ from init. there is this loader in my webpack.base.conf.js :

{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
}
}

For build config :

build{
build.assetsPublicPath: /
}

So, what’s wrong ? Why prod env don’t display my font correctly ?
Thanks to help me to resolve this font problem.

Solution :

Okay no response ? Nobody…

Finally, here is my solution.

In util.js file, insert :

publicPath: ‘../../‘

In this part of code

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
publicPath: ‘../../‘
})
} else {
return [‘vue-style-loader’].concat(loaders)
}

But why ?

Check this two similar issues..

Vuejs forum similar issue
Github similar issue

After build, i can inspect style CSS files in

/dist/src/static/css/

… and noted that my @font-face source have the wrong path after build according to ma dist tree folder :

@font-face{font-family:myFontFileBis;src:url(static/fonts/myFontFileBis.ttf) format(“truetype”)}

Instead of url(static/fonts/myFontFileBis.ttf), i need to get url(../../static/fonts/myFontFileBis.ttf).

So, i need to set publicPath in util.js.

it work now !

[Vue.js] How to refresh v-data-table after REST API Patch call?

there is a data table in Vuetify that is populated via a REST get request, using a function “getData” that is called when the app is mounted. The <td>’s in the table have buttons that the user can hit to “lock” the period (the row/column intersection).

When they hit the button, they get a popup confirmation dialog. When they hit “OK”, there is a save method called to write the current date back to the db via a REST PATCH request (see below).

My problem is, the grid is not updating with the results of the patch request. there is to manually refresh the page to see the result. What is the common pattern here? Should i pull down the data again via getData to refresh the table? Should i update the array that the data-table sits on directly?

getData method:

getData() {
var self = this;
return axios
.get(“http://127.0.0.1:5000/api/estimatefinal/periods?dataset=capital")
.then(function(response) {
self.periods = response.data;
})
.catch(function(error) {
alert(error);
});
},

Save method:

save(item) {
var self = this;
axios
.patch(“http://localhost:5000/api/estimatefinal/period/" + self.id, {
date: moment(self.selected_date, “YYYY-MM-DD”).format(
“YYYY-MM-DDTH:m:s”
)
})
.then(function() {
this.getData(); // ????
})
.catch(function(error) {
alert(error)
});
this.getData(); // ????
this.close();
}

Solution :

If the PATCH changes only one row in DB, means has visually effect on only one row on the v-data-table, then you can change the data locally when you get “success” response from back-end.

If, in other hand, the PATCH changes many other things in DB (also in v-data-table) the best option is probably to getData() after you get PATCH response.

Point is to keep that same “picture” of values in DB and on screen v-data-table.

[Vue.js] Can i access router query params when defining a route's meta data?

I’m using vue.js Router and setting the meta object field, which is used to set the page title and description.

Right now I set up routes like this:

[…
{
path: ‘/page1’,
component: Page1Component,
meta: {
title: ‘Title for page1’
}
}
…]

and then synchronize this with the DOM:

router.beforeEach((to, from, next) => {
document.title = to.meta.title;
next();
});

One of my routes, to use a query string in the title, but I can’t pass a function to the meta object. Is there a way this can be done, without defining the title in the component?

For example, what I’d want to do:

[…
{
path: ‘/page1’,
component: Page1Component,
meta: (route) => {
title: `dynamic title is ${route.query.param}`
}
}
…]

Solution :

VueRouter doesn’t support setting a route’s meta property to be a function like you’re trying to do.

But you could have the title property be able to also be set as a function which takes in the route as a param:

{
path: ‘/page1’,
component: Page1Component,
meta: {
title: route => `dynamic title is ${route.query.param}`
}
}

And then add a check in the beforeEach hook to set the document.title to the returned value of the title function, in the cases where it is a function:

router.beforeEach((to, from, next) => {
const { title } = to.meta;
document.title = typeof title === ‘function’ ? title(to) : title;
next();
});

Solution 2:

As said in the vue.js router documentation, the to and from objects in navigation guards are both route object, like the $route variable accessible in the component.

Therefore, you can do this :

router.beforeEach((to, from, next) => {
document.title = to.query.param;
next();
});

[Vue.js] prepend and append a tag at each occurence of a string

Basically there is a simple search feature where you can search anything, my problem at the moment is that I need to highlight the searched word on all my articles. For example if I search “Spain” and there is a article like with the following title: “Spain is the best country, on Spain we have…” I need to highlight both “Spain” words.

I already made some attempts & currently there is a function below where my entry.title is the article title, “Spain is the best country, on Spain we have…” and the search Word is “Spain”, this solves my problem but just with 1 occurrence.

processTitle () {
let newTitle = this.entry.title
if(this.entry.title.includes(this.searchWord) && this.searchWord) {
newTitle = this.entry.title.split(this.searchWord)
console.log(newTitle)
return `${newTitle[0]} <b>${this.entry.title}</b> ${newTitle[1]}`
}

return newTitle
},

I Need to have a fresh new title where there is all occurrences of the searched word highlighted. Any help with this?

Solution :

You can use regex to search entire string globally for all occurences of the phrase and replace it with a new one

const title = “Spain is the best country, on Spain we have…”;
const searchWord = “Spain”;

function replaceAll(title, searchWord) {
const replacement = `<b>${searchWord}</b>`
return title.replace(new RegExp(searchWord, ‘g’), replacement);
};

console.log(replaceAll(title, searchWord));

[Vue.js] Check if Shift + letter is pressed in JS / Vue 2

Is there a way to check if Shift + letter is pressed in lodash’s debounce?

fetchDebounced: _.debounce(function(e) {
if (e.keyCode === 16 && e.keyCode >= 46 && e.keyCode <= 90) {
console.log(‘shift + letter is pressed’)
}
}

Doesn’t work in my case, using it on keyup event. to print out console message, only when SHIFT+LETTER, for example, Shift+a is pressed (or Shift+z). Is it possible?

Solution :

You can use onkeydown and e.shiftKey:

document.onkeydown = function(e) {
if (e.shiftKey && e.keyCode >= 46 && e.keyCode <= 90) {
console.log(“SHIFT + “ + e.keyCode);
return false;
}
}

Solution 2:

As per this answer:

event.shiftKey is a boolean. true if the Shift key is being pressed, false if not. altKey and ctrlKey work the same way.

So basically you just need to detect the keydown as normal with onkeydown, and check those properties as needed.

Solution 3:

To achieve expected result, use below option of using shiftkey press and keyCode check between 65-90(A-Z) on key up to track as one event

function checkCode(e) {
if(e.shiftKey){
console.log(e.shiftKey && (e.keyCode >= 65 || e.keyCode <= 90))
}
}
<input onkeyup = “checkCode(event)” />

codepen - https://codepen.io/nagasai/pen/NVqMOg

Solution 4:

Because people are answering, this is the best answer from this previously-asked question.

…onkeyup = function(e) {
if (e.keyCode == 13)
{
// if (e.shiftKey === true)
if (e.shiftKey) // thruthy
{
// new line
}
else
{
// run the function
}
return false;
}
}

Also note Das_Geek’s answer above, that altKey and ctrlKey work the same way, per the venerable Niet the Dark Absol.

[Vue.js] CORS when using axios but works normal using curl

I’m trying to use GET from an API(not mine). I test it using simple curl it works normal, but when I try to use axios, axios sends OPTION. Server only accepts GET,HEAD,POST so its throw CORS

Any idea why axios sends OPTION, not GET?

Here’s my curl

<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => ‘https://xxxxxx'
]);
$resp = curl_exec($curl);
curl_close($curl);
?>

Here’s my axios

export default {
data: {
users:[]
},
mounted(){
this.loadData();
},
methods:{
loadData:function(){
axios.get(‘https://xxxxxxxx')
.then(function(response){
console.log(response.data);
});
}
}
}

is it problem with the server or i miss something?

Solution :

In the laravel press ctrl+p then write Verifycsrftoken and inside
protected $except = [ ‘stripe/‘, enter code here’http://example.com/foo/', //any route ];

[Vue.js] Laravel Mix Using Mix() to cache bust around another helper

there is a helper defined below:

function cdn($file)
{
return env(‘CDN_URI’, ‘’).’/‘.ltrim($file, ‘/‘);
}

In my blade, when serving the bundled vue.js js file with the helper:

<script type=”text/javascript” src=”{ cdn(‘/dist/js/app.js’) }”></script>

when having caching issues now so to start using versioning. I read in Laravel Mix docs that to imoport the versioned files, put them in the mix() . Would I be able to wrap that around my other helper as follows:

<script type=”text/javascript” src=”{ mix(cdn(‘/dist/js/app.js’)) }”></script>```

Solution :

To enable versioning, you need to add the following in the webpack.mix.js when you are compiling the assets.

mix.version();

Something along the lines of:

const mix = require(‘laravel-mix’);

mix.js(‘resources/js/app.js’, ‘public/js’)
.sass(‘resources/sass/app.scss’, ‘public/css’)
.version();

Then after you add this to the template:

<script src=”{ mix(‘js/app.js’) }”></script>

Compile the assets with npm run prod, and if you view the source, you will see something like the following where you put the JavaScript.

<script src=”/js/app.js?id=476befa31a13c804b084”></script>

Finally, you can add the cdn() helper, make sure to wrap the helper around the mix() function.

<script src=”{ cdn(mix(‘js/app.js’)) }”></script>

[Vue.js] Vue add class to target but remove from other instances

I’m attempting to create a sortable table component in vue.js and it’s all working but I just wanted to add some little finishing touches, one thing I wanted was to add a class to the column that is currently being sorted and remove it from all other columns but I can’t work out how to do the last part. I keep reading things saying that I shouldn’t be trying to target DOM elements in vue.js which makes me also think my use of event.target.classList.add() isn’t correct either.

This is my method as it stands now:

methods: {
sort_column (event, index) {
if (this.sortAsc) {
event.target.classList.add(‘sortable–down’)
this.sortAsc = false
return this.tableData.sort((a, b) => {
if (a[index] < b[index]) return -1;
if (a[index] > b[index]) return 1;
return 0;
})
} else {
event.target.classList.add(‘sortable–up’)
this.sortAsc = true
return this.tableData.sort((a, b) => {
if (a[index] > b[index]) return -1;
if (a[index] < b[index]) return 1;
return 0;
})
}
},
}

and this is where it is called:

<th v-for=”(item, index) in headings” :key=”index”
@click=”sort_column($event, index)””>

Back in the days of jQuery, I would just target the parent of the clicked element, find all of the columns and remove the class from it but if I can’t (or shouldn’t) target DOM elements in vue.js then I’m at a loss for the right way to do this.

Solution :

The only thing that comes to my mind would be assigning the class with vue.js like this. https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

Store the index of the column that was sorted (in a variable named idxSorted for this example) and then do (tested):

<th :class=”{ sorted: (index === idxSorted) }” v-for=”(item, index) in headings” :key=”index” @click=”sort_column($event, index)””>

You can assign the sortable–down and sortable–up classes the same way with an additional check for sortAsc.