programing

계산된 속성이 변경되어도 부트스트랩 구성 요소가 변경되지 않음

yellowcard 2023. 6. 24. 08:57
반응형

계산된 속성이 변경되어도 부트스트랩 구성 요소가 변경되지 않음

저는 제 프로젝트에서 부트스트랩-뷰 폼 구성요소를 사용합니다.계산된 속성을 사용하여 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>

계산된 속성은 단방향이므로 v-모델로 사용할 수 없습니다(명시적으로 정의하지 않는 한).get그리고.setmethods): https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter .

v-model에 데이터 속성(변수)을 사용하는 것이 더 나을 수 있으며, 스토어 get 결과로 미리 채운 다음 제출 시 데이터 속성(변수)으로 스토어 값을 설정합니다.

언급URL : https://stackoverflow.com/questions/58125086/bootstrap-b-form-input-component-does-not-change-when-computed-properties-were

반응형