更改<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 模型(除非使用显式get和set方法定义它们(： https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter。

您最好为 v 模型使用数据属性(变量(，并使用存储 get 的结果预填充它，然后在提交时将存储值设置为数据属性(变量(