Vue - 动态更改默认输入文本值答案

【问题标题】：Vue - change default input text value dynamicallyVue - 动态更改默认输入文本值
【发布时间】：2021-04-07 21:06:52
【问题描述】：

我有一个简单的 Vue 表单组件，它有一些文本输入：

<input type="text" class="form-control" v-model="amount">

此文本输入具有以下默认值：

mounted() {
    this.$store.commit('refreshBalance')
  },

  data() {
      return {
        amount: this.$store.getters.baseBalance,
      };
  },

我的代码的问题是amount 的值始终相同，如果我更改该 Vuex 商店的值，它不会改变。

因此，例如，如果我打开页面 this.$store.getters.baseBalance 等于 10，然后我将其更改为 20，则该输入字段的默认值将始终为 10。有什么方法可以使其反应？提前致谢。

【问题讨论】：

在哪里以及如何更改baseBalance 的值？你能发布你的那部分代码吗？
是的，我添加了它。基本上在加载组件时，我会刷新该值

标签： vue.js

【解决方案1】：

将其更改为计算属性，并使用get 和set 方法。您还需要在商店中创建一个操作来更新 baseBalance，在下面的代码中我将其命名为 SET_BALANCE。

当您更新输入时，set 方法运行，该方法将amount 的值提交到存储通过。 SET_BALANCE.

<input type="text" class="form-control" v-model="amount">

...

computed: {
  amount: {
    set(amount) {
      this.$store.commit('SET_BALANCE', { amount })
    },
    get() {
      return this.$store.getters.baseBalance
    }
  }
}

【讨论】：