Develop Reference

How do I use vuelidate with an array of objects?

I have an array of objects that I loop through in my form questionnaire. There are five properties in each object, but only one property requires validation. I set up the validations part of the component as below:
specificGifts: {
$each: {
passThrough: {
required: requiredIf(function(value) {
return this.docs.includes('Will')
})
}
}
},
I saw on vuelidate documents that in my form html, instead of doing the following code below:
<div
v-for="(gift, i) in specificGifts"
:key="i"
>
<v-select
label="How does this specific gift pass if the recipient does not survive?"
v-model="gift.passThrough"
:items="specificGiftPassThrough"
></v-select>
</div>
I should use:
<div
v-for="(gift, i) in $v.specificGifts.$each.$iter"
:key="i"
>
<v-select
label="How does this specific gift pass if the recipient does not survive?"
v-model="gift.passThrough.$model"
:items="specificGiftPassThrough"
></v-select>
</div>
The data part of my vuejs component is as follows:
data(){
return{
specificGifts: []
}
}
However, I then get the following console error "Cannot read property $model of undefined". When I console.log $v.specificGifts.$each.$iter, I also get console errors. Does anyone know what I am doing wrong? Is there a better way to use validation? It seems vuelidate may not be up to speed in that it requires me to hardcode loop through a $v property just so I can use vuelidate, anyhow.

I've been facing the validation of a survey and want to share my solution.
My specific case is I have many questions and any of them has many answers (a group of radio buttons). My objective is to validate every question so that for each, one radio must be checked.
First I get the questions array of objects from API (my "value" properties are different):
[
{
"value":"a",
"name":"first question",
"answers":[
{
"label":"first answer",
"value":"a1"
},
{
"label":"second answer",
"value":"a2"
},
...
]
},
{
"value":"b",
"name":"second question",
"answers":[
{
"label":"first answer",
"value":"b1"
},
{
"label":"second answer",
"value":"b2"
},
...
]
}
...
]
Then, after getting the API response, I prepared another array of objects for the answers:
this.questions.map(function (item) {
return {
questionId: item.value,
answerId: null
};
})
the result is this structure:
[
{
questionId: 'a',
answerId: null,
},
{
questionId: 'b',
answerId: null,
}
...
]
I used quasar framework for the template but I think you can reproduce this logic with basic html:
<q-field v-for="(question, key) in questions" :key="question.value"
filled
:label="question.name"
>
<template v-slot:control>
<q-option-group
v-model="answers[key].answerId"
:options="question.answers"
type="radio"
/>
</template>
</q-field>
Finally my validation rule is:
validations: {
answers: {
$each: {
answerId: {
required
}
}
}
}

i've also had a lot of trouble with Vuelidate.
The best solution i can give you is to change from Vuelidate to VeeValidate.
It's not complicated to change and it's going to save you a lot of time in the long run.
VeeValidate offers a lot of easy ways to use validation including custom Messages for each rule (no more computed's to give error messages) and allow's you to use rules depending on certain conditions.
You can check the documentation here

Data bound v-if dynamic condition

I was wondering if it's possible to have a data binded v-if directive, I have an array of objects representing nav links or buttons (for login , logout ...) each of this objects has a v-if property where I define the v-if condition as a string.
From my laravel backend:
$globals['socialLinks'] =
[
[ 'title' => 'facebook', 'v-if' => '$app.auth', 'icon' => 'fab fa-facebook-f', 'url' => config('app.facebook'), 'image' => '/img/social/facebook-alt-white.svg' ],
];
In my template (I transform this into json and pass it to my vue component template):
<div class="LAYOUTfooter9_row_container">
<a class="LAYOUTfooter9_social_image_container" :href="social.url" v-for="(social,index) in $app.globals.socialLinks" v-if="[social.v-if]" :key="index+'S'">
<img class="LAYOUTfooter9_social_image" :src="social.image">
</a>
</div>

Execute JavaScript code stored as a string can be dangerous. Think twice if you really need it...
<a class="LAYOUTfooter9_social_image_container" :href="social.url" v-for="(social,index) in $app.globals.socialLinks" v-if="evaluateCondition(social.v-if)" :key="index+'S'">
methods: {
evaluateCondition(condition) {
return eval(condition)
}
}
Your conditions have to be an expression and will be executing in the context of Vue instance so instead of $app.auth you need to use this.$app.auth

Forcing v-validate to update rules (with Vue)

I'm using v-validate with Vue. I'm trying to figure out how to force v-validate to update rules. For example, I have something like this:
<template>
<div v-for="field in fields">
<input :name="field.name" v-validate="field.rules">
</div>
</template>
<script>
export default {
data() {
fields: [
{
name: "city",
rules: {
included: []
}
}
]
}
}
</script>
As you can see, my "included" array is empty on page load. I get the array from an AJAX request, and then I update my data:
this.fields[0].rules.included = cities
But v-validate doesn't seem to acknowledge the newly-added array. It only works if I hardcode the cities into my data. How can I force v-validate to respond to the updated rules?

Vue.js is unable to track updates on nested reference types.
Try:
let fields = [...this.fields]
fields[0].rules = cities
this.fields = fields

Use Vue.set to track changes : https://v2.vuejs.org/v2/guide/reactivity.html
Vue.set(this.fields[0], 'rules', cities);

How to loop through a list of components in VueJS

I may have gone about this completely the wrong way from the beginning so all advise is welcomed.
I am trying to create a basic page with inputs on the right and hints for the inputs on the left and when you focus on the inputs the appropriate hint is highlighted on the left.
There is a JSFiddle here: https://jsfiddle.net/eywraw8t/210693/
This will not work as I do not know how to find the appropriate hint to highlight (and set isHighlighted to false on all the other hints).
I managed to get a working example by adding a highlighted prop on the field object and not using a hint component. However in reality the fields data will come from the database so it won't have a highlighted parameter so a hint component seemed more sensible.
To put my question in simple terms: How can I find the relevant hint component when focused on an input?
JS Fiddle showing functionality without a component: https://jsfiddle.net/as2vxy79/
Broken JS Fiddle trying to use a component: https://jsfiddle.net/eywraw8t/210693/
Here is the JS outside JS Fiddle:
Vue.component('hint', {
template: `
<div class="hint" :class="{'highlight-hint': isHighlighted }">
<slot></slot>
</div>
`,
data() {
return {
isHighlighted: false
}
}
});
new Vue({
el: "#app",
data: {
fields: [
{
'id': 'name',
'hint': 'Put the name here'
},
{
'id': 'description',
'hint': 'Put the description here'
},
{
'id': 'more',
'hint': 'Put more here'
}
]
},
methods: {
onFocus(focusedField) {
// Somehow loop through the hints
// I am aware there is no "hints" property this is an example
this.hints.forEach(function(field) {
field.isHighlighted = (focusedField == field.id)
})
}
}
})

Short answer: you don't need a direct reference to the components displaying the hint because you can solve this problem using reactivity.
Only thing you need to do is add a data field which stores the field id you want to highlight and then conditionally add a class to the hint you want to highlight based on the selected id (or render the components conditionally).
new Vue({
el: "#app",
data: {
highlightedFieldId: '',
fields: [
{
'id': 'name',
'hint': 'Put the name here' },
{
'id': 'description',
'hint': 'Put the description here' },
{
'id': 'more',
'hint': 'Put more here' }
]
},
methods: {
onFocus(focusedFieldId) {
this.highlightedFieldId = focusedFieldId;
}
}
})
Here's an update to your Fiddle.
NOTES:
If you really need direct references you can use the ref directive (this also works in a list of components generated by v-for).
You should probably think about using tooltips for the hints. E.g. using Element UI's Tooltip.
UPDATE:
So, here's a solution using the ref directive to obtain a reference to the highlighted hint component. You can see that I used the field id in :ref but you still get an array from this.$refs[focusedFieldId] since there is a surrounding v-for. Other than that, it's pretty simple.
I also updated the hint component to accept the is-highlighted prop so it can change its class on its own (you previously used a data property for this which does not result in a component update).

How to filter a data object?

Context: I receive from Elasticsearch the result of a search (example below) which I put into a Vue.js data object. I then list the data via <div v-for="result in results">{{result.name}}</div>.
var vm = new Vue({
el: "#root",
data: {
results: [{
'name': 'john',
'big': true
},
{
'name': 'jim',
'tall': true
},
{
'name': 'david'
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
<div v-for="result in results">{{result.name}}</div>
</div>
I now would like to filter the results. To do so, I will have switches which will be bound via v-model.
Question: what is the correct way to handle filtering in Vue.js?
I would like to render (via a v-if, I guess) only elements from results which match a filter (say, big is checked - so only johnshould be visible), or a concatenation of filters (logical AND).
The part I have a hard time turning into Vue.js philosophy is "display the element if all active switches are present (value true) in that element).
Since I am sure that having a chain of v-ifs is not the right approach, I prefer to ask before jumping into that (and I would probably rather rerun a search with parameters than go this way - but I would prefer to avoid the search way).

Create a computed property which returns only the filtered results:
computed: {
filteredResults() {
return this.results.filter((result) => {
// your filter logic, something like this:
// return result.big || result.tall
});
}
}
And use it in the v-for instead:
<div v-for="result in filteredResults">{{result.name}}</div>