如何将Vue事件发射到状态

Question

如何将从组件发出的事件值直接设置为data属性中的状态，而不是先调用函数然后再设置它如

<Input
id="firstname"
type="text"
v-model="user.firstname"
required
p="p-2
md:p-4"
class="mt-2"
errorText="First name field cannot be empty"
:validation="user.firstname.length === 0"
@valid="checkFirstName"
/>

但是我想将直接来自@valid的值设置为我状态中的键

Answer 1

该值为$event，您可以将其直接设置为数据属性:

@valid="name = $event"

既然你的问题被标记为Vuex，也许你想调用一个突变:

@valid="$store.commit('SET_NAME', $event)"

我看不出有什么好理由这样做，因为你可以从孩子那里做出承诺。如果问题是关于在没有突变的情况下改变Vuex状态，不，这是违反的，不应该这样做。

下面是一个示例:

Vue.component('child', {
template: `<button @click="$emit('valid', 'myname')">click me</button>`
})
new Vue({
el: "#app",
data: () => ({
name: ''
})
});

<div id="app">
Name: {{ name }}<br>
<child @valid="name = $event"></child>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>