2방향 바인딩 Nuxt.js

2방향 바인딩 Nuxt.js

입력 시 상태를 업데이트할 수 있는 패턴을 찾고 있습니다.공식 문서에 있는 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
  },
}

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.commitetc...) 양쪽을 섞지 않도록 합니다.

이 문제는 v-modal이 직접 입력에 있지 않고 대신 사용자 지정 입력에 있기 때문인 것으로 나타났습니다.이를 수정하기 위해 커스텀 입력에 슬롯을 만들어 일반 입력에 감아 컴포넌트의 기본 입력이 표시되도록 했습니다.

언급URL : https://stackoverflow.com/questions/68978683/2-way-binding-nuxt-js