Изменить данные конкретной v-модели из v-for в vue
Здравствуйте, добрый день, энтузиаст vue, просто хочу спросить, как я могу контролировать поведение одной v-модели внутри v-for . Прямо сейчас, когда я переключаю радиокнопку на cites, все 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);
}
}
})