无法读取未定义的属性“property_name”

Question

这是我现在的代码：https://jsfiddle.net/5phq111c/5/

HTML部分

<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>
    </tr>
</tbody>

Vue JS 部分

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”。问题出在哪里？

Answer 1

您没有定义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 是否必须是一个数组（是否应该包含多个对象？）。

如果它应该是一个数组，你可能想这样访问它：

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

如果它不应该是一个数组，就这样声明它：

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