Salut, j'essaie de transmettre les données racine à mon composant, j'ai 3 types de données. 2 d'entre eux fonctionnent et tous ont le même code, mais l'une de mes données est indéfinie dans mes props. voici l'échantillon

<my-component v-for="(meat, index) in meats" :key="meat.id" :index="index"></my-component>

---vue script----

Vue.component('my-component', {
     props:['index', 'meat'],
     template: 
     `
     <div>
        <input v-model="meat.kilo"></input>
     </div>
     `,
})


let App = new Vue({
el: "#app",
data: {
   meats: [{
      id:1,
      kilo: 50,
      type: chicken
   ]}.....

Là, c'est aussi simple que ça mais quand je vérifie mon outil de développement vue, il me donne des accessoires non définis

échantillon d'accessoires de viande non définis

0
Jarvis Lorenz Palad 16 mars 2019 à 06:43

2 réponses

Meilleure réponse

La directive v-for n'affecte pas automatiquement l'attribut au composant généré ; il rend simplement cette variable disponible dans la portée et vous permet ensuite d'en faire ce que vous voulez. Cela inclut d'effectuer des opérations simples dessus ou de le donner comme accessoire à un composant enfant du composant répétitif au lieu de la racine.

Ce que vous devez réellement faire est ceci :

<my-component v-for="(meat, index) in meats" :meat="meat" :key="meat.id" :index="index"></my-component>

Cela peut sembler répétitif, mais il est nécessaire de vous donner plus de liberté quant à la manière exacte dont vous souhaitez utiliser les éléments du tableau.

0
Mattias Martens 16 mars 2019 à 04:05

En fait, vous n'avez pas index et meat comme accessoires mais meats. Donc

Change ça:

props:('index', 'meat'),

Pour ça:

props:['meats'], // also to note, it's in array syntax
0
Bhojendra Rauniyar 16 mars 2019 à 03:48