With reference to the following Plunkr:
https://plnkr.co/edit/zbOBDEaWvn8Tw0F0O9cy?p=preview
The radio buttons are linked, because clicking 'Yes' checks both 'Yes' radio buttons, and checking 'No' checks both 'No' radio buttons.
In my data model, I have an array with two separate rows:
terms: [
{termBoolean: 'Yes'},
{termBoolean: 'No'}
]
How do I structure my code so that the rows are not linked, and I can check one 'Yes' and one 'No' at a time?
Edit: My original answer was incorrect. Your problem is due to the version of Vue you're using, i.e. version 1.0.26. In version 1 of Vue, there was no (term, index) syntactic sugar. Instead, index was accessed via the special property $index. My earlier answer was not applicable for this version of Vue.
To fix your current code, please make the following change:
<template v-for="term in terms">
<label>
<input type="radio" value="Yes" v-model="terms[$index].termBoolean" />Yes
<input type="radio" value="No" v-model="terms[$index].termBoolean" />No
</label><br>
</template>
Alternatively, upgrade to Vue 2.x. If you choose to go this route, please review the migration guide.
<template v-for="(index, term) in terms">
EDIT : think you misordered the index and the term.
Related
the question I have might be hard to understand, so please help me re-organize the question if you can see the better way to put it in.
So, I am building a registration platform.
(1) First, I receive an array of objects of cases the user can sign time to.
(2) Each object consists of 2 properties, "name", "description".
(3) I store the array in the data, end use it in the element provided by a picker called "vue-multiselect", which basically accepts the array and loops over the objects and displays them.
(4) As you can see, it displays both properties and values, which I am trying to avoid. My question is, is it possible to pass only the "name" value into the picker, and display the description value when hovering the first value?
You can find this use case documentation here: https://vue-multiselect.js.org/#sub-custom-option-template
<multiselect v-model="value"
deselect-label=""
select-label=""
placeholder=""
selected-label=""
:show-pointer="true"
:options="projectCases">
<template slot="option" slot-scope="{ option }">
<strong :title="option.description">{{ option.name }}</strong>
</template>
</multiselect>
ps: I use title attribute to implement display-on-hover functionality. you can use any other tooltip library as well.
On this page https://bootstrap-vue.js.org/docs/reference/validation/ of the documentation of bootstrap-vue, they are giving an example of how to use vee-validate.
However, their example doesn't work for me, because i get a warning saying [vee-validate] A field is missing a "name" or "data-vv-name" attribute. In deed, there is no name or data-vv-name attribute in their example and after adding one of them, it works like a charm.
Is this example outdated / wrong?
<b-form-input id="example-input-1" v-model="form.name" v-validate="{ required: true, min:2 }":state="validateState('form.name')" aria-describedby="input-1-live-feedback" placeholder="Enter name"enter code here></b-form-input>
The documentation has been updated to require name attribute and not v-model binding.
<input v-validate="'required|email'" type="email" name="email">
So Yes. this needs to be updated
I am using the following code to generate radio buttons in my template.
<template v-for="(property,index) in propertiesList">
<input type="radio" :value="index" v-model="picked2"
:checked="property.checked">{{property.address}}<br>
</template>
property.checked has value of checked for one of the rows, and is null for rest of rows. I want to show the corresponding row (with property.checked = 'checked') as checked when the page is rendered. However, all rows appear as unchecked. Could someone please advise how to fix the issue? Thanks.
#Bret has provided the answer in the comment (to my question).
I am currently using Vue Js with Vuetify and Vuelidate for an SPA.
I have a form to create a new Account, which is pretty standard.
What I have decided to do though is break the form into steps and utilise the v-stepper component from Vuetify.
The part I am stuck on is how the users choices as they fill in the form can dictate the steps. For example;
Using a v-if I determine if the v-text-field is needed to be shown, what I am unsure of is how this will effect the forms data/model that will eventually be sent in a POST.
Am I looking at this in the right way? or can someone suggest a better approach?
Code:
<template>
<v-form v-model="stepCount">
<-stepper-header>
<v-stepper-step step="1" :complete="stepStage > 1">
Account Details
</v-steper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :complete="stepStage > 2">
Personal Details
</v-steper-step>
</v-stepper-header>
<v-stepper-content step="1">
<v-text-field>
Usual filler for a text field {Username}
</v-text-field>
<v-text-field>
Usual filler for a text field {Password}
</v-text-field>
<v-text-field>
Usual filler for a text field {Age}
</v-text-field>
<v-text-field>
label="Gender"
v-model="gender
:error-messages="genderErrors"
#intput="v.gender.$touch()"
#blur="v.gender.$touch()"
</v-text-field>
</v-stepper-content>
<v-stepper-content>
<v-text-field v-if="gender == 'F'">
label="Bra Size"
v-model="braSize
:error-messages="braSizeErrors"
#intput="v.gender.$touch()"
#blur="v.gender.$touch()"
</v-text-field v-else>
<v-text-field>
Usual filler for a text field {t-ShirtSize}
</v-text-field>
</v-stepper-content>
Thanks in advance.
It seems like your asking several things here so here is what I think the answer your looking for is.
To control the stepper flow you can either set the stepStage to variables like steppers shows or use a computed variable that returns the state based on the collected data.
Computed state
computed:{
stepStage(){
if(/*certain content is correctly filled and a next button has been clicked*/)return 1
if(/*check another computed variable that decides if the form is complete*/)return 2
//etc
}
}
As far as v-if statements in forms. It shouldn't affect a submitted form since it actually removes or inserts an element based on the value as stated in the first paragraph of this section. Note v-stepper doesn't use v-if.
For more control you may consider saving the data in the state of the component and then use javascript to do the actual submission. This allows you to have complete control over what is sent to the server.
Two equal examples (according to Vue.js) work differently:
First
<input v-model="value" #input.once="setDirty" type="text" id="object-email">
Second:
<input v-bind:value="value" v-on:input="value = $event.target.value"
#input.once="setDirty"
type="text"
id="object-email">
In the first example value changes only after second input, while the second example works correctly.
If we delete #input.once attribute, two examples will work fine.
P.S. Vue 2.4.0
This was a bug that was fixed in version 2.4.3.
As a workaround for previous versions, you can simply use #keydown.once="setDirty" instead of #input.once.