I'm new to Vue, and can't achieve quite a simple thing. I want to be able to use the loop index to set a unique name for an attribute. For example, I want to set the ID attribute to something like this: id="somename{{index}}", but that gives an interpolation inside attributes error.
<div v-for="(dt, index) in driveTrain" >
<input type="radio" id="driveTrain-{{index}}" >
<label for="driveTrain-{{index}}">{{dt}}</label>
</div>
you can bind the id dynamically using v-bind directly:
<div v-for="(dt, index) in driveTrain" >
<input type="radio" :id="'driveTrain'+index">
<label :id="'driveTrain'+index">{{dt}}</label>
</div>
Or:
bind it using template literals :
<div v-for="(dt, index) in driveTrain" >
<input type="radio" :id="`driveTrain${index}`">
<label :id="`driveTrain${index}`">{{dt}}</label>
</div>
Related
How to put inline if in checked property on input in the vuejs?
this is my code
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="if (index==0):'checked'">
</div>
Igot error message : avoid using JavaScript keyword as property name: "if"
Raw expression: :checked="if (index==0) 'checked'"
This is how to do:
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="index===0 ? true: false">
</div>
I'm looking for something like the code below to display a list of topics from the array right under the box where user adds them. (newest on top)
I know I can unshift instead of pushing to change the order topics are stored in the array but is there a way to keep the original array order and just reverse the displayed topics without triggering the
"[Vue warn]: You may have an infinite update loop in a component render function."?
<div class="field add-topic">
<label for="add-topic">Add a Topic (press Tab):</label>
<input type="text" name="add-topic" #keydown.tab.prevent="addTopic" v-model="newTopic">
</div>
<div v-for="(tpc, index) in topics.reverse()" :key="index">
<label for="topic">Topics:</label>
<input type="text" name="topic" v-model="topics[index]">
</div>
the slice method will create a copy of your array. Use it before reverse to only reverse the copy.
topics.slice().reverse();
<div class="field add-topic">
<label for="add-topic">Add a Topic (press Tab):</label>
<input type="text" name="add-topic" #keydown.tab.prevent="addTopic" v-model="newTopic">
</div>
<div v-for="(tpc, index) in topics.slice().reverse()" :key="index">
<label for="topic">Topics:</label>
<input type="text" name="topic" v-model="topics[index]">
</div>
More info : https://stackoverflow.com/a/30610528/5671919
I'm using a custom element to print the length of an input element. I got it working in a regular environment, but I have trouble creating unique refs in a repeat.for environment
I've tried using combinations of ref=name$index or ref=name${$index}, but none of them work so far.
In a non-repetitive environment, this works
<div class="row">
<label>
Name
<my-custom-element field.bind="name"></my-custom-element>
<input
type="text"
name="name"
ref="name"
value.bind="name"
maxlength="150" />
</label>
</div>
However, once I use repeat for, it stops working, cause I am using field.bind and ref wrongly. E.g.
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="name${$index}"></my-custom-element>
<input
type="text"
name="name${$index}"
ref="name${$index}"
value.bind="item.name"
maxlength="150" />
</label>
</div>
I'm just trying to make the ref look something like name0, name1, name2 etc, so that it is unique.
The error looks like Parser Error: Unconsumed token { at column 5 in expression [name${$index}]
You are iterating through items, which presumably is an array of objects having a name property. I think you want something more like the following:
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="item.name"></my-custom-element>
<input
type="text"
name="item.name"
ref="item.name"
value.bind="item.name"
maxlength="150" />
</label>
I have some questions getting from the database, It has options also. Then rendering those on the webpage.
like This
<div v-for="(question,index) in questions">
<div class="interview__item-text interview__text-main m-b-20">
{{ index+1 }}. {{ question.question }}
</div>
<div v-for="(option,index) in question.options"
class="reg__form-radioitem" :key="index">
<div>
<input class="checkbox countable__input"
v-model="question.answer"
:value="option.option"
type="checkbox"
:id="question.id+option.id">
<label :for="question.id+option.id">
{{ option.option }}
</label>
</div>
</div>
</div
This is working fine for input type text and radio but for checkbox it does not work. It checks all the checkboxes in that loop.
question.answer does not exist on the data.i am trying to add new property answer using v-model
Thanks.
Maybe you can try to predefine the question.answer, should exist after this:
data: {
question: {
answer: null
}
}
Try this.
<input class="checkbox countable__input"
v-model="question[answer]"
:value="option.option"
type="checkbox"
:id="question.id+option.id">
<label :for="question.id+option.id">
{{ option.option }}
</label>
Does anyone know if it's possible using thymeleaf templates to iterate with a specific numerical value that does not come from the index or the size of an array?
For example:
for(i=0;i<4;i++).
So something similar to a for loop and yes I have looked at the thymeleaf docs.
Thanks in advance!!
Hopefully this helps. The form below will be used to take in a chemical name along with a few other details which are the other fields. I would like to repeat the form fields a specific number of times which is determined by the user. So if the user is asked "how many chemicals would you like to add to your list?" and the answer is 3 I would like to have the form fields repeat 3 times.
<form method="post" th:object="${reagent}">
<div>
<label th:for="chemName">Compound/Reagent</label>
<input th:field="*{chemName}" />
<span th:errors="*{chemName}"></span>
</div>
<div>
<label th:for="mw">Molecular Weight(g/mol)</label>
<input th:field="*{mw}"/>
<span th:errors="*{mw}"></span>
</div>
<div>
<label th:for="density">Density(g/L)</label>
<input th:field="*{density}"/>
<span th:errors="*{density}"></span>
</div>
<div>
<label th:for="hazard">Hazards</label>
<textarea th:field="*{hazard}"></textarea><br/><br/>
<span th:errors="*{hazard}"></span>
</div>
<br/>
<input type="submit" value="Add Chemical"/>
</form>