Почему VueJS автоматически перезагружается после массива push?

Question

Когда я помещаю значение в мой массив с помощью VueJS, Chrome отображает его, но сразу после перезагрузки моей веб-страницы.

let vm = new Vue ({
    el:'#app2',

    data: {
        people: ['Robert', 'Pablo', 'Lucas', 'Teban']
    },

    methods: {
        addPerson: function() {
            this.people.push('Maxime')   
        },
    }
})

    <section id="app2" style="margin-top: 100px">
        <p>{{people}}</p>
        <form>
            <button v-on:click='addPerson'>Ajouter une personne</button>
        </form>
    </section>

Answer 1

Ваша проблема в том, что ваш <button> элемент отправляет форму.Если type не определено, по умолчанию установлено submit , что приводит к отправке формы (и, следовательно, перезагрузке / обновлению страницы):

submit: кнопка отправляет данные формы на сервер.Это значение по умолчанию, если атрибут не указан или атрибут динамически изменяется на пустое или недопустимое значение.

Чтобы предотвратить это, вы можете использовать:

<button v-on:click='addPerson' type='button'>Ajouter une personne</button>

Или используйте prevent модификатор события в директиве click:

<button v-on:click.prevent='addPerson'>Ajouter une personne</button>

Или вызовите event.preventDefault() непосредственно в методе:

methods: {
    addPerson: function(e) {
        e.preventDefault();
        this.people.push('Maxime')   
    },
}