Develop Reference

Convert string to boolean for checkbox

I use v-model to display checked/unchecked checkboxes:
<template v-for="(item, index) in myFields">
<v-checkbox
v-model="myArray[item.code]"
:label="item.name"
/>
</template>
It works fine when I get true or false values from API. But now I get strings: "true" or "false" and my checkbox is always checked.
If I change the code on:
v-model="Boolean(myArray[item.code])"
I got the error:
'v-model' directives require the attribute value which is valid as LHS
How can I solve this problem?

Trying Boolean(myArray[item.code]) won’t work anyway because the string 'false' is true. So Boolean('false') return true.
Instead you should do myArray[item.code] !== 'false'
'false' will return false and every other string than false will return true
EDIT: You need to change myArray to an array of boolean like so
myArray.map((element) => element !== 'false')
Then this code will work
<template v-for="(item, index) in myFields">
<v-checkbox
v-model="myArray[item.code]"
:label="item.name"
/>
</template>

Vue. How can I get prev and current value in loop v-for for comparing it?

I have a part of the structure:
....
<template v-for="(item, INDEX) in someList">
<template v-if="thisIsArrayList(item)">
<template v-for="(_item) in item">
<Component
:item="_item"
:key="_item.id"
:myprop="checkIndex(INDEX)" - makes here some manipulation with prev and current INDEX and return iterration++ 0, 1
></Component>
</template>
</template>
<template v-else>
....
</template>
</template>
....
The INDEX can be couple times with the same value like (22, 22, 22) the next step like (25, 25) and so on ..
so I tried in props:arrayId to compare prevINDEX with the currentIndex for passing it in child like new value with iterations++
for example:
INDEX couple times equal 22 --> change it on 0 and return this value --> the next INDEX couple time equal 55 --> change it on 1 and return this value --> and so on ...
How can I do it in Vue?
Or maybe there is another solution for this logic?
Thanks.

You don't need to use an explicit variable infact v-for itself provides you the ability to extract index during iteration
<template v-for="(item, index) in items">
<Component
:item="item"
:key="item.id"
></Component>
</template>
As per the above code, the arrayId prop is not necessary, since you are no longer going to compare the indexes [since you won't have redundant values]

separating v-if and v-for Vue.js 3

I have read that we shouldn't put v-if and v-for together in vuejs. I've also got an error in the IDE. How am I suppose to separate the v-if and v-for in my code so that it follows the style guide?
<div
v-for="(value, key, index) in items"
v-if="value.level === undefined || value.level < level"
:key="key"
>
level is a computed value too
computed: {
level() {
return (
user.access>3
);
}
},

You can use invisible wrapper (<template>) element with v-if. Benefit of using this is template won't render until condition met. You can read more about template here
Example:
<div v-for="(value, key, index) in items" :key="key">
<template v-if="value.level === undefined || value.level < level"> // It won't render until v-if = true
....

put the v-if directive in a virtual element template :
<div v-for="(value, key, index) in items" :key="key">
<template v-if="value.level === undefined || value.level < level">
....

If you don't want a bunch of empty divs on the dom, filter it.
computed: {
filtered_items: function() {
return this.items.filter(v => typeof v.level === 'undefined' || v.level < this.level)
}
},
Then use filtered_items instead of items in the v-for
Can also do inline:
v-for="item in items.filter(v => typeof v.level === 'undefined' || v.level < level)"

Getting multiple selected value from v-chip-groups

there are two arrays
categoryArr=['test','demo'] and regionArr = ['GJ','MH']
i am using v-chip-groups to display this array values in chips
<v-row>
<v-chip-group
class="float-right"
multiple
v-model="rgSelected"
active-class="deep-purple--text text--accent-2"
>
<v-chip filter v-for="(region,i) in regionArr" :value="region" :key="i">{{region}}</v-chip>
</v-chip-group>
</v-row>
<v-divider class="my-2"></v-divider>
<span style="font-size:1.5rem">Category</span>
<br />
<v-row>
<v-chip-group
class="float-right"
multiple
v-model="ctSelected"
active-class="deep-purple--text text--accent-2"
>
<v-chip filter v-for="(category,i) in categoryArr" :value="category" :key="i">{{category}}</v-chip>
</v-chip-group>
</v-row>
I'm using watch here
watch: {
rgSelected: "showDuedate",
ctSelected: "showDuedate"
}
methods: {
showDuedate() {
console.log(this.ctSelected, this.rgSelected);
}
},
and the v-model are ctSelected =[] and rgSelected = [].
But when i click on 'GJ' the rgSelected = ['GJ']
and after that if i click on 'test' the output displays ctSelected=['GJ','test'] and rgSelected=['GJ'].
Can you tell me what I'm doing wrong here.

I checked it here on mine and there are no errors and all was fine. Seems vuetify version issue, please upgrade it. I solve it after upgrading.
here's the result.
ctSelected: -- rgSelected : GJ
ctSelected: test -- rgSelected : GJ
ctSelected: test,demo -- rgSelected : GJ
the v-chips

How to use slot-scope for index in for loop?

I'm using vue-datatable which has the following:
<slot v-for="(row, i) in processed_rows" :row="row" :columns="normalized_columns">
And I'm trying to get the index like this:
<template slot-scope="{ row, i }">
However, i always returns as undefined.