は未定義

Question

のプロパティ「PROPERTY_NAME」を読み取ることができませんこれが今の私のコードです：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); 
        }); 
      }, 
     } 

私が選択したのproduct_idを取得し、選択した製品の値を取得するためのaxios要求を送信します。私は行とproduct_idをバインドしました。 Rowオブジェクトで選択された値を取得していますが、row.product_idでリクエストを送信しているときにエラーが発生しました。定義されていない 'product_id'プロパティを読み取れません。問題はどこだ？

Answer 1

あなたドン」：このようにそれを宣言し、それが配列であってはならない場合

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

t rowデータプロパティを定義しますが、rowsデータプロパティ配列を定義します。 v-forループ内からselectedメソッドを呼び出すと、自動的にthis.rowの値が割り当てられることはありません。

selectedメソッドで選択した行のproduct_idを使用する場合は、@change="selected(row.product_id)"でテンプレートに渡します。

それからちょうどあなたのselected方法でそのパラメータを参照：

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

Answer 2

は、あなたはそれでは正確に一つのオブジェクトの配列としてrowsを宣言しているように見える：

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

しかし、あなたは、通常のオブジェクトと同じようにアクセスします。また

var id = this.row.product_id; 

、あなたが宣言しますそれはrowsとなりますが、row（複数の不一致s）としてアクセスしてください。

実行するには、最初にrowsまたはrowの名前を付けるかどうかを決定し、それに応じて使用方法を調整します。次に、rowsが配列でなければならないかどうか（複数のオブジェクトを保持する必要があるかどうか）を決定します。

それは配列でなければなりません場合、あなたはおそらく、このようにアクセスしたい：

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