Vue组件用v-model绑定Userdata报错：属性或方法未定义

你遇到的错误是因为作用域不匹配：

• 你在product_list组件的data里定义了Userdata，但Blade模板里的<input>是挂载在根Vue实例（#app）下的，根实例无法直接访问子组件（product_list）内部的私有数据。

如果这个输入框本来就是产品列表组件的一部分，直接把它放到组件的<template>里，这样就能直接使用组件内的Userdata：

修改后的组件代码（template部分）： #

<template>
    <div>
        <!-- 新增输入框和按钮 -->
        <input type="text" id="product_name" class="form-control" v-model="Userdata.product_name">
        <button class="btn btn-info btn-sm" v-on:click="storeproductvue()"> vueذخیره</button>
        
        <table class="blueTable">
            <thead>
                <th></th>
            </thead>
            <tbody>
                <tr v-for="product in products" :key="product.product_id" class="{ selected: isSelected }">
                    <td class="product_name"> {{ product.product_name }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

修改后的Blade模板： #

<div id="app" style="overflow-y: scroll;">
    <product_list></product_list>
</div>

如果输入框必须留在Blade模板（根实例），需要用父传子+子传父的方式实现数据同步：

步骤1：定义根Vue实例（比如在你的app.js文件中） #

new Vue({
    el: '#app',
    data() {
        return {
            Userdata: {
                product_name: '',
                product_id: 0
            }
        }
    },
    methods: {
        // 触发子组件的保存方法
        handleStoreProduct() {
            this.$refs.productList.storeproductvue(this.Userdata);
        }
    }
})

步骤2：修改product_list组件，添加props并修正方法 #

<script>
import Vue from 'vue';
import axios from "axios";

export default{  
    // 接收父组件传来的用户数据
    props: ['parentUserdata'],
    mounted() {  
    },  
    data() {  
        return {  
            products: [],
            loading: false,
            buttonsLoading: []
        };  
    },  
    created: function () {
        this.loadproducts();
    },
    methods: {  
        loadproducts() {  
            let url = "/product_listvue";
            axios
                .get(url)
                .then((response) => {
                    this.products = response.data;
                })
                .catch((error) => console.error(error));
        },
        
        async delproductvue(product_id) {
            Vue.set(this.buttonsLoading, product_id, 1);
            this.loading = true;
            let url = "/delproductvue/" + product_id;
            try {
                let response = await axios.post(url);
                if (response.status == 419) {
                    alert('لطفا صفحه را رفرش و دوباره تلاش نمایید.');
                }
                if (response.status == 200) {
                    console.log(response.status);
                }
                this.products = response.data;
                this.loading = false;
            }
            catch (err) {
                console.log(err);
                alert(err);
                this.loading = false;
            }
        },
        
        // 修正保存方法，接收父组件传来的数据
        async storeproductvue(userData) {
            let formData = new FormData();
            // 注意：p_id需要明确来源，比如从userData或选中的产品中取
            formData.append('product_id', userData.product_id);
            var file_data = $('#image').prop('files')[0];
            if(file_data) formData.append('image', file_data);
            formData.append('_name', userData.product_name);
        
            this.loading = true;
            let url = "/storeproductvue/";
            try {
                let response = await axios.post(url, formData);
                if (response.status == 200) {
                    console.log(response.status);
                }
                this.products = response.data;
                this.loading = false;
            } catch (err) {
                console.log(err);
                alert(err);
                this.loading = false;
            }
        }
    }
}
</script>

步骤3：修改Blade模板，传递数据并绑定事件 #

<div id="app" style="overflow-y: scroll;">
    <input type="text" id="product_name" class="form-control" v-model="Userdata.product_name">
    <button class="btn btn-info btn-sm" v-on:click="handleStoreProduct()"> vueذخیره</button>
    <!-- 传递父组件数据给子组件，添加ref用于调用子组件方法 -->
    <product_list :parent-userdata="Userdata" ref="productList"></product_list>
</div>

你的storeproductvue方法里还有几个必改的错误：

1. 变量拼写错误：formData写成了form_data
2. 未定义变量：p_id和product_id没有明确来源，需要补充逻辑
3. 异步请求未加await，直接判断response.status会拿到Promise对象而非真实响应结果

内容的提问来源于stack exchange，提问作者Davoud Bahrami