Я не знаю, почему эта ошибка появляется внутри 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>

Надеюсь, это поможет