vue.js 中的动态 v-model答案

【问题标题】：Dynamic v-model in vue.jsvue.js 中的动态 v-model
【发布时间】：2016-11-07 05:16:32
【问题描述】：

有人可以帮我生成动态 v-model 值吗？

<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
  }


]

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

提前致谢！

【问题讨论】：

你能添加从 ajax 调用返回的汽车对象吗？
对不起，我不明白。什么意思？
我认为他的意思是cars 看起来像什么？请包含一个 JSON 示例，说明您对问题的 ajax 调用的响应。
知道了，我刚刚用 JSON 响应示例更新了我的问题。

标签： javascript model vue.js

【解决方案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];
}

【讨论】：