2 路绑定 Nuxt.js

Question

我正在尝试找到一种我可以使用的模式，它允许我根据输入更新状态。我已经尝试了几种模式，包括官方文档中的 get set 方法，但我似乎无法使任何东西起作用。我可以通过 {{email}} 获取状态更改以显示在我的页面上，但在填写表单时则不能。我将不胜感激此时的任何解决方案。

<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
  },
}

Answer 1

如果您查找 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 等...）尽量不要两者混合

Answer 2

问题原来是由于 v-modal 不是直接在输入上而是在自定义输入上。为了解决这个问题，我在我的自定义输入中创建了一个插槽，并将其包裹在一个常规输入周围以显示我的组件中的基本输入。

2 路绑定 Nuxt.js

2 way Binding Nuxt.js

data-binding

state

vuex

nuxt.js