Question

从几个示例中得到启发，我试图编写一个自定义组件，以一种特定的方法来格式化其值。

以下是组件：

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

没有成功，同样的事情会发生。

有人可以告诉我怎么了吗？

Answer 1

正如@ohgodwhy在评论中提到的那样：

在期望prop的组件中缺少this.value定义，因此它没有反应。

Vue + Vuex：格式化输入数据

1 个答案: