ne peut pas lire la propriété « property_name » undefined

Question

Ceci est mon code en ce moment: https://jsfiddle.net/5phq111c/5/

<tbody v-for="row in rows" :key="row.product_id"> 
         <tr> 
          <td> 
         <select @change="selected" v-model="row.product_id" class="form-control" name="product_id" id="product_id"> 
          <option value="">Select Product</option> 
          <option v-for="item in items" :value="item.id" v-text="item.product_name"></option> 
         </select>           
          </td> 
          <td> 
           <textarea type="text" v-model="product.product_details" name="product_details" id="product_details" class="form-control" rows="1" placeholder="Product Details"> 
           </textarea> 
          </td> 
          <td> 
           <input v-model.number="product.product_sellPrice" type="number" step="any" class="form-control" name="rate" id="rate" placeholder="Rate"> 
          </td> 

export default{ 

     data() { 

      return { 
       rows: [{ 
        product_id: '', 
        product_details: '', 
        product_sellPrice: '',  

       }], 
}, 
methods: { 
      addrow: function (event) { 
      event.preventDefault(); 
      this.rows.push({ 
       product_id: '', 
       product_details: '', 
       product_sellPrice: '', 
      }); 
     }, 
      selected(e){ 
       var id = this.row.product_id; 
       console.log(id); 
       axios.get('/estimate/product/' + id) 
        .then((response)=>{ 
         this.product = ''; 
         this.product = response.data; 
        }) 
        .catch((error) => { 
         console.log(error); 
        }); 
      }, 
     } 

Je veux obtenir le product_id sélectionné et envoyer une demande d'Axios pour obtenir les valeurs du produit sélectionné. J'ai lié le product_id avec la ligne. Je reçois la valeur sélectionnée dans l'objet rows, mais lorsque j'envoie la requête par row.product_id je reçois l'erreur impossible de lire la propriété 'product_id' de undefined. Où est le problème?

Answer 1

Vous n » t définir une propriété de données row, mais un tableau de propriétés de données rows. L'appel de la méthode selected à partir d'une boucle v-for n'attribue pas automatiquement une valeur à this.row.

Si vous souhaitez le product_id de la ligne sélectionnée dans la méthode selected, transmettez-le dans le modèle via @change="selected(row.product_id)".

Ensuite, il suffit référence qui paramètre dans votre méthode selected:

selected(id){ 
    console.log(id); 
    axios.get('/estimate/product/' + id) 
    ... 
} 

Answer 2

Vous semblez déclarer rows comme un tableau avec exactement un objet en elle:

data() { 
     return { 
      rows: [{ 
       product_id: '', 
       product_details: '', 
       product_sellPrice: '', 
      }], 

Mais vous essayez d'y accéder comme un objet régulier:

var id = this.row.product_id; 

En outre, vous déclarer il comme rows, mais y accéder comme row (missing pluriel s).

Pour le faire fonctionner, d'abord décider si vous voulez le nommer rows ou row et adapter l'utilisation en conséquence. Deuxièmement, décidez si rows doit être un tableau (doit-il contenir plusieurs objets?) Ou non.

Si ce doit être un tableau, vous voulez probablement accéder comme ceci:

var id = this.rows[0].product_id; 

Si elle ne doit pas être un tableau, déclarer comme ceci:

data() { 
     return { 
      rows: { 
       product_id: '', 
       product_details: '', 
       product_sellPrice: '',  
      },