Vue + Vuex: 형식 입력 데이터

Vue + Vuex: 형식 입력 데이터

몇 가지 예에서 영감을 받아 특정 방법으로 값을 포맷하는 커스텀 컴포넌트를 작성하려고 합니다.

컴포넌트는 다음과 같습니다.

<template>
  <input
    type="text"
    v-model="inputValue"
  />
</template>

<script type="text/javascript">
  import {formatPhoneNumber} from '~/utils/string';

  export default {
    computed: {
      inputValue: {
        get() {
          return formatPhoneNumber(this.value)
        },
        set(value) {
          this.$emit('input', formatPhoneNumber(value))
        }
      }
    },
  }
</script>

Vuex를 사용하고 있는데 부모 컴포넌트에서는 다음과 같이 컴포넌트를 호출합니다.

<PhoneInput :value="cellPhoneNumber" class="input" @input="addCellPhoneNumber" />

  computed: {
    cellPhoneNumber() {
      return this.$store.state.identity.cellPhoneNumber;
    },
  },
  methods: {
    addCellPhoneNumber: function(phoneNumber) {
      this.$store.commit('identity/addCellPhoneNumber', phoneNumber)
    },
  }

그set부품은 작동하여 스토어로 보내지지만 데이터는 컴포넌트로 반환됩니다.cellPhoneNumber호출되었지만 호출되지 않았습니다.inputValue#get.

왜냐하면 제가 이걸 쓰는 것과 관련이 있을 수도 있기 때문에@input/:value상위 컴포넌트에서 하위 컴포넌트에서도 사용하려고 했습니다.

<template>
  <input
    @input="formatValue"
    type="text"
    :value="formattedValue"
  />
</template>

<script type="text/javascript">
  import {formatPhoneNumber} from '~/utils/string';

  export default {
    computed: {
      formattedValue: function(){
        return formatPhoneNumber(this.value)
      },
    },
    methods: {
      formatValue(e) {
        this.$emit('input', formatPhoneNumber(e.target.value))
      }
    }
  }
</script>

성공하지 못하면 같은 일이 벌어진다.

뭐가 잘못됐는지 누가 좀 말해줄래?

@ohgodwhy가 댓글에 언급했듯이:

놓치셨군요prop가 기대하는 컴포넌트의 정의this.value반응하지 않습니다.

언급URL : https://stackoverflow.com/questions/59253892/vue-vuex-format-input-data