Question

这是我现在的代码：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发送请求时，我收到错误无法读取属性＆＃39; product_id＆＃39;未定义的。问题在哪里？

Answer 1

您似乎将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: '',      
            },

Answer 2

您没有定义row数据属性，而是定义rows数据属性数组。从selected循环内部调用v-for方法不会自动为this.row分配值。

如果您想要product_id方法中所选行的selected，请通过@change="selected(row.product_id)"将其传递给模板。

然后只需在selected方法中引用该参数：

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

无法读取属性＆＃39; property_name＆＃39;未定义的

2 个答案: