Take the following code which is essentially going to render a form stepper and for the purposes of simplifying my example I have included just one step:
<form-wizard :formdata="this.form_data">
<form-tab stepindex="1" title="Title of Tab" :selected="true">
<div class="col-md-11 col-lg-10">
<div class="form-group">
<label for="OptionType" class="sr-only">Option Type</label>
<select v-model="form_data.optionType" #change="onChangeOptionType" id="OptionType">
<option value=""/>
<option v-for="option in form_data.fees" v-bind:value="option.cost">
{{ option.text }}
</option>
</select>
</div>
</div>
</form-tab>
</form-wizard>
For reasons I cannot understand the values are bound to the select options as expected and without error however the option text throws an error in the browser console that I cannot seem to overcome.
Property or method "option" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
It's like for some reason it is looking out to the wider scope for the option rather than the option in the v-for loop.
I'd appreciate any advice on how to correct this but also any help to try and understand why this is even the case.
If any additional information is required to help answer please let me know.
maybe the problem is v-bind:key on v-for
<select v-model="form_data.optionType" #change="onChangeOptionType" id="OptionType">
<option value=""/>
<option v-for="(option, i) in form_data.fees" v-bind:key="i" v-bind:value="option.cost">
{{ option.text }}
</option>
</select>
Related
I'm new to Vue and am trying to build a form with a datalists. The code I've written seems to work fine but I'm not sure why the dropdown list will appear twice. Once when nothing is typed into the input where it will show all the options available, and the second time when an option is chosen and the dropdown will show only the options that match the one typed. Is there a way to get rid of the second dropdown, where it will only show the dropdown once?
Template
<input list=list1 v-model="test">
<datalist id=list1>
<option v-for "item in items" :value="item" :key="item"></option>
</datalist>
Script
export defaults{
data(){
items: [1,2,3,4,5],
test: ''
}
}
Try using {{ item }} instead of binding :value to show and populate the value.
<div>
<input type="text" list="list1" v-model="test" #change="onChange()" />
<datalist id="list1">
<!-- use normal {{ item }} here without binding value-->
<option v-for="item in items" :key="item">{{ item }}</option>
</datalist>
</div>
I'm new to VueJS.
I'm trying to validate vue-select using vee-validate.
I've tried to validate it manually but of course its not a good approach.
So, I tried to use vuelidate but couldn't get the desired result.
Now i'm trying to use vee-validate. Validation works fine as desired
but the issue is v-model.
I created a global variable product, to calculate the length of array, and passed it in v-model. So that when Its empty product's value will be zero and i can return desired result from vee-validation.
Here's the .vue html part.
<ValidationObserver>
<form #submit.prevent="add">
<div class="row row-xs mx-0">
<label class="col-sm-4 form-control-label">
<span class="tx-danger">*</span> Add product(s):
</label>
<div class="col-sm-8 mg-t-10 mg-sm-t-0">
<ValidationProvider rules="required" v-slot="{ errors }">
<v-select
name="product"
placeholder="Add product(s)"
:options="availableProducts" <-- here is the options array
:reduce="name => name"
label="name"
#input="setSelected"
v-model="product" <-- this calculates length and pass it to vee **extends**
>
</v-select>
<div v-for="error in errors" :key="error"> {{ error }} </div>
</ValidationProvider>
</div>
<!-- col-8 -->
</div>
</form>
</ValidationObserver>
Here's validation.js file
import { extend } from 'vee-validate';
extend('required', value => {
console.log(value);
return value > 0;
});
I don't want this product value there. I know its not a good approach as well. I can't pass whole array to v-model because then I can't push options in it. I can't pass a single option to v-model as well then I won't get desired result.
All I want to validate v-select when options array is empty. Any suggestions?
Veevalidate doesn't validate directly on select elements. This is my workaround.
You should create a v-field "hidden" input and a visible select v-model element. The veevalidate will take place on the v-field.
Here is an example.
<v-field type="text" class="form-control disabled" name="expirationMonth" v-model="expirationMonth" :rules="isRequired" style="display:none;"></v-field>
<select v-model="expirationMonthUI" class="form-control" #click="synchExpirationMonthUI">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<error-message name="expirationMonth"></error-message>
Then add this to your methods to synch both together.
synchExpirationMonthUI() {
this.expirationMonth = this.expirationMonthUI;
}
I have found a way of doing this, with the Rendering Complex Fields with Scoped Slots from the Vee-Validate documentation. And using the bindings from Vue Select, it looks something like this:
<Field name="supportType" v-slot="{ field }" v-model="supportType">
<v-select :options="mediaTypes" label="name" :reduce="mediaType => mediaType.id" v-bind="field">
</v-select>
</Field>
As you can see, I am using here the name, v-slot and v-model for the Field from Vee-Validate, as normal. But the v-slot is very important as it carries the information from Vue Select to Vee-Validate, or at least I think so.
On the other hand I use the options, label, reduce and v-bind from Vue Select, these I use to handle the information. So with the :options I select my dataset, with label I tell Vue Select which label to select and show from the dataset, with :reduce I tell Vue Select what will be the value of the select tag and finally use v-bind to bind the value of the select to the Vee-Validate field. So the information used on the :reduce property will be displayed on the v-model="supportType".
I tested it with a button and it worked. And I liked this way so it is not that messy and I can use the validation and other things as usual.
Hope this helps anyone.
PD: I am using Vue 3, and the latest package of both Vee-Validate and Vue Select, as of today.
I'm trying to implement 1-way binding. What I want is that changing dropdown should affect the text in <p> and the text. Change tag should effect only text within <p>. But when I change the dropdown value, I lost the value within the <p> as well as within the tags
<span class="wt-select">
<select id="student_skill" v-model="selected">
<option v-for="(stored_skill, index) in stored_skills" :key="index.id" :value="stored_skill.id">{{stored_skill}} hours</option>
</select>
<p>{{ selected }}</p>
<input :value="selected" type="text" class="form-control" id="date_time">
</span>
How can I achieve this? I tried the following link, but still unable to achieve this one-way binding:
Vue.js get selected option on #change
So I was wondering why this v-if and v-else statement did not work and why I to tackle it a different way.
The code is as follows
<select v-else v-model="experiment.workflow" required>
<option selected :value="null">Required: Select a Workflow {{ isChain ? 'Chain' : '' }}</option>
<option
v-if="isWorkflowChain"
v-for="workflow of data.workflows"
:key="workflow.uuid"
:value="workflow"
{{ workflow.head.name }}>
</option>
<option
v-else
v-for="workflow of data.workflowChains"
:key="workflow.uuid"
:value="workflow"
</option>
So I was given this piece of code and it looks like when loading in the data in the v-if statement was fine and the values showed in the drop down menu. When I set the value to
export default {
props: {
isWorkflowChain: {
type: Boolean
value: false
}
}
}
What should have occurred was that it should have skipped the v-if element and head into the v-else (Which I believe it does) and populate the data but the v-for statement doesn't populate the data. From first glance does anyone have any thoughts as to why?
This is a valid question, since it's not obvious that a mix of v-for with v-else is currently not supported.
note the closed feature request at
https://github.com/vuejs/vue/issues/4174
Reason
The problem is that v-for has higher priority and therefor is handled first, and v-if is handled second. That means, not only is the v-if executed on every item, but more importantly in the context of this question, it cannot access the v-else outside of the v-for.
Read more here: https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential
Solution
The correct way would be isolate the two blocks, and put the v-if on a higher level, non-rendering <template> component.
<option>
<template v-if="isWorkflowChain">
<option v-for/>
</template>
<template v-else>
<option v-for/>
</template>
</option>
The quicker way to do it is to use an opposite conditional (!isWorkflowChain) with a v-for like this though.
<select v-else v-model="experiment.workflow" required>
<option selected :value="null">Required: Select a Workflow {{ isChain ? 'Chain' : '' }}</option>
<option
v-if="isWorkflowChain"
v-for="workflow of data.workflows"
:key="workflow.uuid"
:value="workflow"
>{{ workflow.head.name }}</option>
<option
v-if="!isWorkflowChain"
v-for="workflow of data.workflowChains"
:key="workflow.uuid"
:value="workflow"
>{{ workflow.head.name }}</option>
</select>
and you can make isWorkflowChain a computed. If you have multiple statements and want to capture the else, it gets a bit trickier, but you can put that logic into a computed.
Vue 3 - Breaking Change
In Vue 3 v-if will have higher precedence than v-for:
https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html#overview
Computed Properties
However, it is recommended to avoid using both on the same element, and instead of dealing with this at the template level, one method for accomplishing this is to create a computed property that filters out a list for the visible elements:
computed: {
isWorkflowChain: () => {
// do filtering
}
}
Template
<option v-for="workflow in isWorkflowChain">
{{ workflow.head.name }}
</option>
Docs: https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html#introduction
you need to close <option>, forget > of v-if option :
your code :
<option
v-if="wf = 'workflow'"
v-for="workflow of data.workflows"
:key="workflow.uuid"
:value="workflow" // here where `>` is missing
{{ workflow.head.name }}
</option>
what it's should be :
<option
v-if="wf = 'workflow'"
v-for="workflow of data.workflows"
:key="workflow.uuid"
:value="workflow">
{{ workflow.head.name }}
</option>
I have the following vuejs code:
<select v-model='selectedInverter' class="custom-select" #change="changedInverter">
<option>Select an inverter</option>
<template v-for="inverter in localInverters">
<option>{{inverter.display_name}}</option>
</template>
</select>
If I console.log(this.selectedInverter) in my changedInverter, I get just the display_name and not the whole object. How do I capture (or bind) the whole object in v-model?
The documentation on this is here: https://v2.vuejs.org/v2/guide/forms.html#Select
If you scroll down to the dynamic options section you'll see example code that will get you where you need to be:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
In your case, your v-bind:value data will be the entire inverter object, where the option text would be {{inverter.display_name}} as you already have in place.