时间戳

首页 > 解决方案 > Vue + Vuex：格式化输入数据

vue.js - 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>

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

有人可以告诉我出了什么问题吗？

标签： vue.jsvue-componentvuex

解决方案

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

您在prop期望的组件中缺少定义this.value，因此它不是反应性的。

推荐阅读