vue js array reset to initial data

Question

currently i am trying to do a reset to initial data that is being loaded. Any help is appreciated.

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);
    }
});

when the button triggers the reset function, only the name and year gets reset. how do i get the "group in groups" input to reset as well?

Kamrul Touhid · Accepted Answer · 2018-12-17 06:00:20Z

1

change your reset function add group object

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

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

edited Dec 17, 2018 at 6:00

answered Dec 17, 2018 at 5:03

Kamrul Touhid

1565 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NewProgrammer Over a year ago

Do u mean to add the groups array data back into vue groups? like a "this.groups = groups"?

Kamrul Touhid Over a year ago

if call rest button i just empty groups data .

Collectives™ on Stack Overflow

vue js array reset to initial data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related