无法读取的不确定

属性“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;的方式是什么？ –

无法读取的不确定

回答

相关问题