Javascript 为什么VueJS在推送阵列后自动重新读取？

当我用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>

let vm=new Vue({
el:'附录2'，
数据：{
人物：['Robert'，'Pablo'，'Lucas'，'Teban']
},
方法：{
addPerson:function（）{
这个.人.推（'Maxime'））
},
}
})
{{人}

外部人员

您的问题是您的

元素正在提交表单。如果未定义

类型，则会导致表单提交（从而重新加载/刷新页面）：

submit
：按钮将表单数据提交到服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值

要防止出现这种情况，您可以使用：

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

或者直接在方法中调用
event.preventDefault（）
：

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

你能分享更多的代码吗。这里似乎没有太多问题您确定触发
addPerson（）
的元素没有重新加载页面吗？例如，它是一个
或
元素，您没有使用
event.preventDefault（）
（或者为前者设置
type=“button”
？{{people}
一个外部人员，正如@Terry所说，如果您使用的是按钮点击事件，您必须设置type=“button”.
methods: {
    addPerson: function(e) {
        e.preventDefault();
        this.people.push('Maxime')   
    },
}