<b-field label="Username" :type="{ 'is-danger': Boolean(form.errors.username[0]) }" :message="{ form.errors.username[0]: Boolean(form.errors.username[0]) }">
<b-input v-model="form.values.username" placeholder="Username"></b-input>
</b-field>
This is giving me this error:
Errors compiling template:
invalid expression: Unexpected token '.' in
{ form.errors.username[0]: Boolean(form.errors.username[0]) }
Raw expression: :message="{ form.errors.username[0]: Boolean(form.errors.username[0]) }"
I am new to Vue and have been stuck on this problem. Can anyone please help?
if you are trying to have the message prop being an object having form.errors.username[0] as a key, you need to wrap it with [ and ] eg:
:message="{ [form.errors.username[0]]: Boolean(form.errors.username[0]) }">
Related
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?
I am trying to apply required validation for vue-ctk-date-time-picker using :rules.
Its Working for other elements but not working with vue-ctk-date-time-picker
Please correct me.
Here is the script that i am trying
dateTimePickerRules: [(v) => !!v || 'This Field is required'],
<vue-ctk-date-time-picker
id="RangeDatePicker"
v-model="tempInterpreterProjectDate"
classname="form-control"
color="dodgerblue"
:only-date="true"
:no-shortcuts="true"
format="YYYY-MM-DD"
formatted="ddd, MM/DD/YYY"
:range="true"
:rules="dateTimePickerRules"
#input="selectedInterperateDate"
></vue-ctk-date-time-picker>
vue-ctk-date-time-picker is not a Vuetify component. There is no such property as rules. You need to implement a custom validation, e.g. on form submit (check if tempInterpreterProjectDate has a value)
I have managed to validate vue-ctk-date-time-picker as follwing.
<ValidationObserver ref="dateTimeRef">
<ValidationProvider
v-slot="{ errors }"
name="Date/time"
rules="required"
>
<vue-ctk-date-time-picker
id="RangeDatePicker"
v-model="tempInterpreterProjectDate"
classname="form-control"
color="dodgerblue"
:only-date="true"
:no-shortcuts="true"
format="YYYY-MM-DD"
formatted="ddd, MM/DD/YYY"
:error-messages="errors"
:range="true"
#input="selectedInterperateDate"
></vue-ctk-date-time-picker>
<span class="v-messages theme--light error--text">{{
errors[0]
}}</span>
</ValidationProvider>
</ValidationObserver>
I am validating this field something like this
// it will return eithter true or false
const isDateTimeValid = await this.$refs.dateTimeRef.validate()
I want to validate text fields, trying below code :
<input v-validate="result.val=='Required' ? 'required' : ''" v-model="required" :name="f_name" type="text"/>
but getting this error:
app.js:48089 [Vue warn]: Failed to resolve directive: validate
Trying this:
<ValidationProvider name="phone" :rules="required" v-slot="{ errors }">
<input class="form-control" :name="phone" type="text" v-model="form.phone"/>
</ValidationProvider>
According to the migration guide this directive is removed in v3.x :
Fields that had the v-validate directive needs to be wrapped by ValidationProvider component now, and they need to use v-model to properly tag themselves for vee-validate.
So this:
<input type="text" name="field" v-validate="'required'">
<span>{{ errors.first('field') }}</span>
Will be re-written as this:
<ValidationProvider name="field" rules="required" v-slot="{ errors }">
<input type="text" v-model="value">
<span>{{ errors[0] }}</span>
</ValidationProvider>
Your code should be like :
<ValidationProvider name="f_name" :rules="result.val=='Required' ? 'required' : ''" v-slot="{ errors }">
<input v-model="required" :name="f_name" type="text"/>
</ValidationProvider>
You should add this to main.js :
import { ValidationProvider } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);
If you are not using a bundler and using vee-validate in the browser or from a CDN:
<script>
// ...
Vue.component('validation-provider', VeeValidate.ValidationProvider);
// ...
</script>
I try to do a simple validation with Vuelidate, for required, but I get an error, and I am not sure why!?
Thanks!
<form ref="form" #submit.stop.prevent>
<b-form-group>
<b-form-input
v-model="name"
:state="name"
v-model.trim="$v.name.$model"
:class="{
'is-invalid':$v.name.$error, 'is-valid':!$v.name.$invalid}"
></b-form-input>
</b-form-group>
<div class="valid-feedback">Ok!</div>
<div class="invalid-feedback">
<span v-if="!$v.name.required">Not ok!</span>
</div>
</form>
import required from "vuelidate/lib/validators";
validations: {
account_name: {
required
}
}
Error in render: "TypeError: Cannot convert undefined or null to object"
I found the problem.
import { required } from "vuelidate/lib/validators";
Required must have { } .
I have a v-for div like bellow:
<div
v-for="(item_disk, index_disk) in $store.state.buy_physicalserver_disk_list"
>
<Button
:type="get_choose_disk_type(item_disk)"
:key="index_disk"
#click="select_disk(item_disk)"
>
{{ item_disk.content }} // if I comment this line it will works fine.
</Button>
</div>
I will get error in this case.
invalid expression: Invalid or unexpected token in "\n "+_s(item_disk.content)+"\n " Raw expression: {{ item_disk.content }}
See my code, if I comment the {{ item_disk.content }}, there will not have this issue.
I know this issue, use
<Button>{{item.content}}</Button>
get the error, but if I use
<Button v-text="item.content"></Button>
there will not have this issue.