vue.js中的动态v模型

Question

Can someone help me generate dynamic v-model values?

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

Sample JSON response - note how all the properties are different..:

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
  }


]

I have an ajax call that returns an array of cars objects. The problem is all the objects returned have variable attributes. Therefore, how can vue.js handle these variable attributes for v-model? I've tried things like v-model="car[ {{attr_1}} ]" but these all return errors.. Can someone help?

Thanks in advance!

Answer 1

You can do it something like:

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

alternatively, You can also write a method, which given car object and attribute, will return corresponding value:

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