Question

我在同一个页面中多次加载表单组件，那是因为我有更多的表单用于不同的任务，所以每个表单都有不同的参数。

HTML 页面：

<div id="app">
  <myForm formType="buy"></myForm>
  <myForm formType="sell"></myForm>
  <myForm formType="submit"></myForm>
  <refreshAmount></refreshAmount>
</div>

这是表单组件：

<template>
  <div>
      
      <div v-if="formType=='buy'">
        
        <form @submit.prevent="formSubmit()">

        <input type="text" class="form-control" value="testetete" v-bind:value="amount">

        <button v-if="side==='buy'" class="btn btn-primary" style="width: 100%">BUY</button>

        <p>Available amount: {{$store.getters.amount}}</p>
        </form>

      </div>

      ...


  </div>

</template>
     
<script>

export default {

  props:{

    formType:{
      type:String, 
      default:'buy'
    },
  },

  mounted() {
    console.log('mounted')
  },

  data() {
    return {
      amount: this.$store.getters.amount

    }
      
  },
  methods: {
    ...
  }
}
</script>

然后我有以下商店：

<script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    amount: 0
  },
  mutations: {
    refreshAmount(state) {

      fetch('SOME-URL')
        .then(response => response.json())
        .then(data => {
          
          state.amount = 100
          //state.amount = data['amount']

        })
    }
  },
  getters: {
    amount: state => state.amount,
  }
})
</script>

最后是 refreshAmount 组件：

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

基本上，我需要在表单组件中显示一个数量。这个数量是从我的后端检索的，因为我加载了 3 次表单组件，我会调用我的后端 3 次，而我只需要调用一次，所以我决定创建组件 refreshAmount调用一次并使用 Vuex 存储将其传递给表单组件。

我的代码有以下问题：

当我加载页面时，我会在所有 3 个组件上看到 可用数量：100，这样就可以了；但在文本输入表单的默认值中，该值为 0。这是为什么？为什么在更新 <p>Available amount: {{$store.getters.amount}}</p> 时输入文本字段中的值没有更新？

Tl;dr：我正在使用 Vuex 设置组件中变量的值，当我在 <p> 标记之间加载变量时，该值会刷新，而在输入字段内，则是变量保持不变。

Answer 1

amount 没有更新，因为它是一个数据属性，它只在组件第一次设置时初始化，之后不会更新。您需要的是一个 computed 属性，它将跟踪 Vuex 存储中的更改。所以，而不是：

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

你可以这样做：

computed: {
  amount() {
    return this.$store.getters.amount
  }
}

Vue - 如何更新输入文本字段的默认值？

1 个答案: