您好,Vue爱好者,我只想问问我如何控制v-for中单个v模型的行为。现在,当我更改单选按钮以引用所有v-if等于“ cites”时,我只希望将特定行设置为“ cites”
现在当我更改一个时,一切都在改变。这是我的代码。预先感谢。
<div class="card mb10" v-for="(animal,index) in animals">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<label>Type</label>
<input type="radio" name="animal_type[]" value="noncites" v-model="at">Non Cites <input type="radio" name="animal_type[]" value="cites" v-model="at">Cites
</div>
</div>
<br>
<div class="card mb10" v-for="(animal,index) in animals">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>TOTAL MONETARY VALUE in USD: </label>
<input type="number" name="monetary_value" class="form-control" step="0.1" min="1">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Type</label>
<input type="radio" name="animal_type[]" value="noncites" v-model="at">Non Cites <input type="radio" name="animal_type[]" value="cites" v-model="at">Cites
</div>
</div>
<br>
<div v-if="at =='cites'">
<p>cites</p>
</div>
</div>
</div>
</div>
这是我的Vue代码:
new Vue({
el: '#app',
data() {
return {
animals:[0],
counter: 0,
at:[]
}
},
methods: {
addAnimals(){
this.counter = this.counter + 1;
this.animals.push(this.counter);
console.log(this.animals);
},
deleteAnimals(index){
console.log(index);
this.animals.splice(index, 1);
console.log(this.animals);
}
}
})