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时，it is set to submit by default导致表单提交（并因此重新加载/刷新页面）：

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

为防止这种情况，您可以使用：

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

或在点击指令上使用prevent event modifier：

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

或直接在方法中调用event.preventDefault()：

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

为什么在推送数组后VueJS会自动重新加载？

1 个答案: