Question

有人可以帮助我生成动态v模型值吗？

<div v-for="car in cars">
  <div class="row">
    <div class="col-md-2">
      <p v-model="car.attr_1">{{ car.attr_1 }}</p>
    </div>
    <div class="col-md-3">
      <p v-model="car.attr_2">{{ car.attr_2 }}</p>
    </div>
    <div class="col-md-2">
      <p v-model="car.attr_3">$ {{ car.attr_3 }}</p>
    </div>
    <div class="col-md-2">
      <p><input type="text" class="" placeholder="Quantity" v-on:click="addCar(car)"/></p>
    </div>
  </div>
</div> 


<script>

module.exports = {

  data: function () {
    return {
      cars: ''
    }
  },

  methods: {

    getCars: function () {

      var self = this;

      $.ajax({
        type: "GET",
        url: '/api/cars',
        success: function(data) {
          self.cars = data;
        }
      });
    }
  }
}

</script>

示例JSON响应 - 请注意所有属性的不同之处..：

cars: [

  {
    make: 'Audi',
    model: 'R8',
    color: 'red'
  },

  {
    make: 'Chevy',
    tires: 'All Season',
    weight: 30
  },

  {
    make: 'Chevy',
    tires: 'Summer',
    color: 'black'
  },

  {
    make: 'Ford',
    weight: 40,
    gps: true
  }


]

我有一个ajax调用，它返回一个cars个对象的数组。问题是返回的所有对象都具有可变属性。因此，vue.js如何处理v-model的这些变量属性？我尝试过像v-model="car[ {{attr_1}} ]"这样的东西，但这些都会返回错误。有人可以帮忙吗？

提前致谢！

Answer 1

你可以这样做：

<div v-for="car in cars">
  <div class="row">
    <div class="col-md-2" v-if="car.make">
      <p v-model="car.make">{{ car.make }}</p>
    </div>
    <div class="col-md-3" v-if="car.tires">
      <p v-model="car.tires">{{ car.tires }}</p>
    </div>
    <div class="col-md-2" v-if="car.color">
      <p v-model="car.color">$ {{ car.color }}</p>
    </div>
    <div class="col-md-2">
      <p><input type="text" class="" placeholder="Quantity" v-on:click="addCar(car)"/></p>
    </div>
  </div>
</div>

或者，您也可以编写一个方法，给定car对象和属性，将返回相应的值：

function(car, attr){
  return car[attr];
}

vue.js中的动态v模型

1 个答案: