从v-for中更改特定v-模型的数据

时间:2018-07-26 00:27:48

标签: javascript vue.js v-for v-model

您好,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  &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 个答案:

没有答案