双向结合Nuxt.js
双向结合Nuxt.js
提问于 2021-08-30 03:36:46
我试图找到一种模式，我可以用它来更新输入的状态。我尝试过几种模式，包括官方文档中的get set方法，但我似乎无法让任何东西工作。我可以使用{电子邮件}在我的页面上显示状态更改，但在填写表单时不能用相反的方式显示。我希望在这一点上有任何解决办法。
<template>
<section>
<BaseInput placeholder="Email" type="text" :value="email" @input="updateEmail" />
</section>
</template>
<script>
import { mapState } from 'vuex'
export default {
components: {
BaseInput,
},
computed: {
...mapState({
email: (state) => state.email,
}),
},
methods: {
updateEmail(email) {
this.$store.commit('updateEmail', email)
},
},
}
</script>index.js
export const state = () => ({
email: '',
})
export const mutations = {
updateEmail(state, payload) {
state.email = payload
},
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-30 07:48:46
如果您查找eventListener，您将得到整个事件对象：https://developer.mozilla.org/en-US/docs/Web/API/Event
如果只想使用字段的值，则需要使用
this.$store.commit('updateEmail', email.target.value)PS，需要考虑的几点：
- 在发布您的问题时尝试将更多的精力放在格式化上，
- 不使用
mutations，而是actions(Vuex的核心内容) - 要么只使用助手(
mapState，mapActions等等)或直接Vuex ($store.state，$store.commit等.)尽量不要混合
Stack Overflow用户
发布于 2021-09-01 22:07:41
这个问题被证明是因为v模式不是直接在输入上，而是一个自定义输入。为了解决这个问题，我在我的自定义输入中做了一个插槽，并将它封装在一个常规的输入中，以显示组件中的基本输入。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68978683
复制相关文章
相似问题
腾讯云开发者
