我不知道为什么这个错误出现在 Laravel 内部？

Question

我已经编写了这段代码，我想方便用户动态输入文本并显示具有值的字段，但是当我运行它时无法得到结果 laravel+VueJs 组件视图。下面是我的代码

<template>
<div>
    <div>
        <label>Name</label>
        <input type="text"  @change="addRow">
    </div>
    <div> <label>Email</label>
        <input type="text"  @change="addRow1">
    </div>
    <div v-for="row in rows" :key="row.id">
        <button-counter :id="row.id" :value="row.value"></button-counter>
    </div>
</div>

<script type="text/javascript">
Vue.component('button-counter', {
    props: {
        value: {
            default: ''
        }
    },
    template: '<input type="text" style="margin-top: 10px;" v-model="value" >',
})

export default {
    mounted() {
        console.log('Component mounted.')
    },

    data: {
        rows: [],
        count:0
    },
    methods: {
        addRow: function () {
            var txtCount=1;
            id='txt_'+txtCount;
            this.rows.push({ value:'MyName' , description: "textbox1", id });

        },
        addRow1: function () {
            var txtCount=1;
            id='txt2_'+txtCount;
            this.rows.push({ value: "myEmail", description: "textbox2", id });

        }

    }


}

Answer 1

data 应该是一个函数，它返回一个包含您要操作的数据的对象，并且您需要将 id 定义为一个变量，这是一个有效的 Vue SFC

<template>
    <div>
        <div>
            <label>Name</label>
            <input type="text" @change="addRow" />
        </div>
        <div>
            <label>Email</label>
            <input type="text" @change="addRow1" />
        </div>
        <div v-for="row in rows" :key="row.id">
            <button-counter :id="row.id" :value="row.value"></button-counter>
        </div>
    </div>
</template>

<script type="text/javascript">
Vue.component("button-counter", {
    props: {
        value: {
            default: ""
        }
    },
    template: '<input type="text" style="margin-top: 10px;" v-model="value" >'
});

export default {
    data() {
        return {
            rows: [],
            count: 0
        };
    },
    methods: {
        addRow: function() {
            var txtCount = ++this.count;
            let id = "txt_" + txtCount;
            this.rows.push({ value: "MyName", description: "textbox1", id });
        },
        addRow1: function() {
            var txtCount = ++this.count;
            let id = "txt2_" + txtCount;
            this.rows.push({ value: "myEmail", description: "textbox2", id });
        }
    }
};
</script>

希望对你有帮助