無法讀取的不確定

屬性「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.product_id發送請求時，出現無法讀取屬性'product_id'的未定義錯誤。哪裏有問題？

來源

2017-10-18 zahid hasan emon

你不」 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) 
    ... 
}

來源

2017-10-18 10:48:24 thanksd

嗯它正在工作，但如果我添加一個新的行，新行充滿了前一行數據，並改變一個正在改變所有其他行數據 –

這是一個單獨的問題，我想這是因爲你推動'product_id'的對象等於一個空字符串，這就是'v-for'所呈現的每個元素的'：key'綁定的內容。但是由於所有的鍵都是相同的值，因此使用該鍵的第一個實例的數據呈現元素。您需要爲'key'屬性提供* unique *和* unchanging *值。 – thanksd

在這種情況下，我該如何在這裏實現一個唯一的密鑰？以便我可以用該密鑰選擇每一行並查找值。「rows [0] .quantity」就像這樣。 –

你似乎在它宣佈rows作爲陣列正好與一個對象：

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

但您嘗試訪問它就像一個普通的對象：

var id = this.row.product_id;

此外，聲明它作爲rows，但訪問它作爲row（缺少複數s）。

要使其運行，請首先決定是否要將其命名爲rows或row並相應地調整使用情況。其次，決定rows是否必須是一個數組（它是否應該包含多個對象？）或不。

如果它應該是一個數組，你可能要訪問它像這樣：

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

如果它不應該是一個數組，其聲明如下：

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

來源

2017-10-18 10:43:11 cello

這將是一個數組。我將推動更多這樣 this.rows.push目的是通過（{ \t \t \t \t PRODUCT_ID： ''， \t \t \t \t \t product_details： ''， \t \t \t \t \t product_sellPrice： ''， \t \t \t}）; 那麼聲明var id = this.rows [？]。product_id;的方式是什麼？ –

無法讀取的不確定

回答

相關問題