Vue JS массив сбрасывается на исходные данные

Question

в настоящее время я пытаюсь сделать сброс к начальным данным, которые загружаются.Любая помощь приветствуется.

html:

<div id="app">
    <input v-model="name" type="text">
    <input v-model="year" type="text">
    <div v-for="group in groups">
        <input v-model="group.group_name" type="text">
        <input v-model="group.remarks" type="text">
    </div>
    <button @click="reset">Click to reset</button>
</div>

vue js:

const groups = [
    {
        group_name: 'group1 name',
        remarks: 'group1 remarks'
    },
    {
        group_name: 'group2 name',
        remarks: 'group2 remarks'
    }
];

const Example = Vue.extend({
    data() {
        return{
            name: 'Creator',
            year: 0,
            groups: groups,
            group: {
                group_name: '',
                remarks: ''
            }
        }
    },
    methods: {
        reset () {
            Object.assign(this.$data, this.$options.data.call(this));
        }
    }
});

new Example({
      el: '#app',
    mounted () {
        setTimeout(() => this.year = 2001, 1000);
    }
});

когда кнопка запускает функцию сброса, только имя и год будут сброшены.как мне сделать так, чтобы вход "группа в группах" также сбрасывался?

Answer 1

изменить функцию сброса добавить групповой объект

const Example = Vue.extend({
                data() {
                    return{
                        name: 'Creator',
                        year: 0,
                        groups: groups

                    }
                },
                methods: {
                    reset () {
                        this.groups =  [
                            {
                                group_name: '',
                                remarks: ''
                            }
                        ]
                    }
                }
            });