Изменить данные конкретной 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  &nbsp; <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  &nbsp; <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);
    }
  }
})

0 ответов

Другие вопросы по тегам