更改计算属性时，引导 <b-form-input> 组件不会更改

Question

我在我的项目中使用 bootstrap-vue 表单组件。我使用计算属性从 vuex 获取数据到我的组件，然后我有在 vuex 存储中保存新数据的方法。当存储中的数据更新时，计算属性中的数据也会更新，但在我的表单中，我看到的是旧数据。 但是如果我使用<input> 标签而不是<b-form-input> 组件，<input> 中的数据会正常更新。如何更新<b-form-input> 中的数据？

<template>
<b-form @submit.prevent="saveWebintSet">
    <div class="form-row">
        <div class="col-lg-4 col-md-6 col-sm-12">
            <b-form-group
                label="Bind Port"
                label-for="bind-port"
                class="required">

                <b-form-input
                id="bind-port"
                v-model="web['bind-port']"
                v-input-mask v-bind:data-inputmask-regex="regExps.bindPort.pattern"
                type="text">
            </b-form-input>
            <div class="invalid-feedback"></div>
        </b-form-group>
    </div>
    <button type="submit" class="btn btn-primary mr-3">Save</button>
</b-form>
</template>

<script>
    export default {
        computed: {
            web: {
                get() {
                    return  this.$store.getters.GET_WEBINTF_SETTINGS;
                }
            },
         },
         methods: {
            saveWebintSet() {
                this.$store.dispatch('SAVE_WEBINTF_SETTINGS', this.web)
            },
        },
     }
</script>

Answer 1

计算属性是单向的，不应用作 v-model（除非您使用显式 get 和 set 方法定义它们）：https://vuejs.org/v2/guide/computed.html#Computed-Setter。

您最好为 v-model 使用数据属性（变量），并使用您的商店获取的结果预先填充它，然后在提交时将商店值设置为数据属性（变量）