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 객체의 배열을 반환하는 아약스 호출을 가지고있다. 문제는 반환 된 모든 객체에 가변 속성이 있다는 것입니다. 따라서 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]; 
}