I use vee-validity (v ^3.4.14) and i have issue:
MyCompontent.vue
<ValidationObserver v-slot="{ handleSubmit }">
<form #submit.prevent="handleSubmit(onSubmit)" >
<ValidationProvider
name="TxF_Loc_Ch1"
:rules="`required|numeric|between: ${$store.state.cnf.rad.txf.minE[0] / 1000}, ${$store.state.cnf.rad.txf.maxE[0] / 1000}`"
v-slot="{ errors, pristine }"
>
<v-text-field
ref="txfLocCh1"
type="number"
v-model="values.upTxfLocCh1"
></v-text-field>
<span
v-if="errors.length > 0"
class="block-error block-error__main"
>{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider
name="TxF_Loc_Ch2"
:rules="`required|numeric|between: ${$store.state.cnf.rad.txf.minE[1] / 1000}, ${$store.state.cnf.rad.txf.maxE[1] / 1000}`"
v-slot="{ errors, pristine }"
>
<v-text-field
ref="txfLocCh2"
type="number"
v-model="values.upTxfLocCh2"
></v-text-field>
<span
v-if="errors.length > 0"
class="block-error block-error__main"
>{{ errors[0] }}</span>
</ValidationProvider>
....
<button type="submit" #click="formValid">Submit</button>
</form>
</ValidationObserver>
export default {
computed: {
formValid () {
// loop over all contents of the fields object and check if they exist and valid.
return Object.keys(this.fields).every(field => {
return this.fields[field] && this.fields[field].valid;
});
}
}
}
In devtools is message:
Error in render: "TypeError: Cannot convert undefined or null to object"
I use code from https://github.com/logaretm/vee-validate/issues/853 , but I do not know where is issue.
Can I ask for help?
Related
I've build a component named Turno (a work shift). I have some kind of calendar, for every day I have more instance of Turno.
If I book myself to a shift then I need to add my name in the shift, but reactivity seems not to work, parent object (with all shifts) doesn't update. I've also added .sync to property.
Shift template:
<div v-for="mansione in turno.mansioni">
<v-row class="ma-0 pa-0 align-end">
<v-col class="ma-0 pa-0" cols="8">
<div class="caption font-weight-bold nome_mansione">{{ mansione.nome.toLowerCase() }}
<span class="caption">(Min. {{ mansione.min }})</span>
</div>
</v-col>
<v-col class="ma-0 pa-0 text-right" cols="4">
<div class="caption font-weight-bold nome_mansione">
<pulsante-generico :small="true" icon="mdi-account-plus" color="orange" #click="aggiungiPersona(turno,mansione)"/>
</div>
</v-col>
</v-row>
<hr class="mt-0">
<div v-for="milite in mansione.militi" class="ma-2" style="line-height: 0.8rem">
{{ milite.cognome }} {{ milite.nome }}
</div>
</div>
After a shift book (this should make reactivity? After this nothing changes, parent object is not affected):
turniService.prenotaTurno(prenotazione).then(d => {
this.$emit("update:turno", d || this.turno)
this.close()
})
Props in shift component:
props: {
turno: {
type: Object,
default: () => {
return {
dataInizio: null,
dataFine: null,
id: 0,
tipo: "",
mansioni: []
}
}
}
},
In the parent I render shifts like this:
<v-col v-for="day in dati.giorni">
<DatiGiornoCalendario :day="day.giorno"/>
<Turno v-for="(turno, i) in day.turni"
:turno.sync="turno"
/>
</v-col>
The turno variable in <Turno v-for="(turno, i) in day.turni" :turno.sync="turno" /> is a local variable in the loop
Use this instead: <Turno v-for="(turno, i) in day.turni" :turno.sync="day.turni[i]" />
js
VeeValidate.Validator.extend('requireWithoutAll', {
validate: (value, [ ...target ]) => {
return value && _.compact(target).length;
},
getMessage: (field, [...target]) => 'The ${field} is required when none of ${target} are present.'
}, {
hasTarget: true
});
vue
<ValidationProvider name="name1" vid="ref1">
<el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 1">
<el-checkbox v-model="is_model_1">Yes</el-checkbox>
</el-form-item>
</ValidationProvider>
<ValidationProvider name="name2" vid="ref2">
<el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 2">
<el-checkbox v-model="is_model_2">Yes</el-checkbox>
</el-form-item>
</ValidationProvider>
<ValidationProvider :rules="'requireWithoutAll:ref1,ref2'" name="name3" vid="ref3">
<el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 3">
<el-checkbox v-model="is_model_3">Yes</el-checkbox>
</el-form-item>
</ValidationProvider>
Expected Result
When ref1 & ref2 is not selecting, there is error generated on ref3.
Actual Result
Error doesn't generate.
The format for specifying the targets is rules="requireWithoutAll:#ref1,#ref2" not rules="requireWithoutAll:ref1,ref2".
See a working example here: https://codesandbox.io/s/codesandbox-forked-u0s3g?file=/src/Demo.vue
Relevant code:
<ValidationProvider
rules="requireWithoutAll:#ref1,#ref2"
vid="ref3"
v-slot="{ errors }"
tag="div"
>
<!-- your checkbox UI here -->
</ValidationProvider>
I'm using vee-validate in my VueJS and I wonder how can i add a validation that if form.order == 1 then the it would be required
<ValidationProvider rules="v-if="form.order == 1 ? required: ''" v-slot="{ errors }" name="Entity">
<v-col md="4">
<v-text-field
label="First Name"
v-model="form.first_name"
outlined
hide-details="auto"
:error-messages="errors[0]"
></v-text-field>
</v-col>
</ValidationProvider>
May I suggest you move #Phymo's answer into a computed property so you keep your template clean, readable, and extendable. that way, you can swap the implementation anytime. i.e.
<template>
<ValidationProvider :rules="applyRules" v-slot="{ errors }" name="Entity">
<v-col md="4">
<v-text-field
label="First Name"
v-model="form.first_name"
outlined
hide-details="auto"
:error-messages="errors[0]"
></v-text-field>
</v-col>
</ValidationProvider>
</template>
<script>
export default {
data: () => ({
form: {
// form structure
}
}),
computed: {
applyRules() {
return this.form.order === 1 ? 'required' : ''
}
}
}
</script>
try this.
:rules="form.order == 1 ? 'required' : ''"
I'm starting to learn vue js and currently implementing a basic crud application. I successfully display 1 record in the table but having a problem when the record count is 2 or more.
I used vuesax serverside table to render the data and here's my code for the template
<vs-table
v-model="selected"
pagination
max-items="10"
search
:data="examiner">
<template slot="header">
<div class="d-flex align-items-center justify-content-between w-100 add-account">
<h3>
Examiner List
</h3>
</div>
</template>
<template slot="thead">
<vs-th sort-key="email">
Fullname
</vs-th>
<vs-th sort-key="Username">
Address
</vs-th>
<vs-th sort-key="User Role">
Email
</vs-th>
<vs-th sort-key="action">
Action
</vs-th>
</template>
<template slot-scope="{data}">
<vs-tr :data="row" :key="indextr" v-for="(row, indextr) in data" >
<vs-td :data="data[indextr].firstname">
{{ data[indextr].firstname }} {{ data[indextr].lastname }}
</vs-td>
<vs-td :data="data[indextr].address">
{{ data[indextr].address }}
</vs-td>
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td>
<div class="d-flex">
<vs-button class="mr-1" color="primary" data-placement="top" data-toggle="tooltip"
title="Edit Examiner"
#click="editUser(row)"
vs-type="border" size="small" icon="edit"/>
<vs-button class="mr-1" color="danger" data-placement="top" data-toggle="tooltip"
title="Delete Examiner"
vs-type="border" size="small" icon="delete"/>
</div>
</vs-td>
</vs-tr>
</template>
</vs-table>
Here's my code for the script
<script>
import axios from "../../axios";
export default {
name: "examiner",
data() {
return {
host: window.location.host,
edit: false,
examiner: [],
selected: []
}
},
mounted() {
this.fetchUsers()
console.log(this.examiner)
},
methods: {
fetchUsers() {
axios.get('../api/getExaminer')
.then(response => {
this.examiner = response.data
})
.catch(error => console.log(error))
},
editUser(row) {
this.edit = true;
console.log(row)
}
}
}
</script>
Currently whenever I'm trying to load a data I'm receiving this error
I've just had this issue. it appears that if the :data prop is null or not iterable it will show this error.
In my case, the data prop became at some point null. for you I suggest the following:
First, use a computed value for data prop that returns an empty array in case there is an error.
make sure that your response.data is really an array or iterable object
In my Laravel+Vue.js SPA ( Single Page Application) I am using the datepicker package from here, BootstrapVue from here and Veevalidate from here .
I think I need to show only the code inside my component file as only the datepicker component causes the problem and not other ones. My code follows in EditProfile.vue:
<ValidationObserver ref="form" v-slot="{ passes }">
<div id="registration_form">
<b-form #submit.prevent="passes(onSubmit)" #reset="resetForm">
<ValidationProvider vid="name" rules="required|min:2" name="name" v-slot="{ valid, errors }">
<b-form-group
label="User Name:"
label-for="exampleInput1"
>
<b-form-input
type="text"
v-model="name"
:state="errors[0] ? false : (valid ? true : null)"
placeholder="Enter your name"
></b-form-input>
<b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</ValidationProvider>
<ValidationProvider vid="dob" rules="required" name="dob" v-slot="{ valid, errors }">
<b-form-group
label="Date of Birth:"
label-for="exampleInput1"
>
<datepicker
type="text"
v-model="dob"
required
format="d-M-yyyy"
:state="errors[0] ? false : (valid ? true : null)"
>
</datepicker>
<b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</ValidationProvider>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div><!-- end of id registration_form-->
</ValidationObserver>
JS part inside EditProfile.vue is:
import Datepicker from 'vuejs-datepicker';
import { ValidationObserver, ValidationProvider } from "vee-validate";
export default {
name: "EditProfile",
components: {
ValidationObserver,
ValidationProvider,
Datepicker
},
data: () => ({
name: "",
dob:""
}),
methods: {
onSubmit() {
console.log("Form submitted yay!");
},
resetForm() {
this.name = "";
this.dob = "";
requestAnimationFrame(() => {
this.$refs.form.reset();
});
}
}
};
When the submit button is pressed then validation works for name field but no error message shows up when dob field on datepicker is empty .
My Vue.js version is 2.6.10 and I used the latest versions of BootstrapVue and Veevalidate (3) as well.
How can I make the validation work for the date picker as well ?