Bootstrap <b-form-input> component does not change when computed properties were changed

Question

I use bootstrap-vue form components in my project. I get data from vuex to my component with computed properties and then I have method that saving new data in the vuex store. When data in the store is updated, data in the computed properties is updated too, but in my form I see old data. But if I use <input> tag instead <b-form-input> component, data in the <input> is updated normally. How can I update data in the <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>

Troy Morehouse Troy Morehouse · Accepted Answer · 2019-09-26T23:43:02

Computed properties are one-way and shouldn't be used as a v-model (unless you define them with explicit get and set methods): https://vuejs.org/v2/guide/computed.html#Computed-Setter.

You are probably better off using a data property (variable) for the v-model, and pre-populate it with the result of your store get, and then on submit set the store value to the data property (variable)

Bootstrap <b-form-input> component does not change when computed properties were changed

1 Answers