vue.jsの動的vモデル

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 
    } 


] 

私はcarsオブジェクトの配列を返しますAJAX呼び出しを持っています。問題は、返されるすべてのオブジェクトに可変属性があることです。したがって、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]; 
}