Dynamisches V-Modell in vue.js

Question

Kann mir jemand helfen, dynamische V-Modellwerte zu generieren?

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

Beispiel JSON-Antwort - man beachte, wie alle Eigenschaften unterschiedlich sind ..:

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 
    } 


] 

ich einen Ajax-Aufruf haben, die ein Array von cars Objekten zurückgibt. Das Problem besteht darin, dass alle zurückgegebenen Objekte über variable Attribute verfügen. Wie kann also vue.js mit diesen Variablenattributen für v-model umgehen? Ich habe Dinge wie v-model="car[ {{attr_1}} ]" versucht, aber diese alle zurück Fehler .. Kann jemand helfen?

Vielen Dank im Voraus!

Answer 1

Sie können es so etwas wie:

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

Alternativ können Sie auch eine Methode schreiben, die car Objekt und Attribut angegeben werden entsprechende Wert zurückgeben:

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