계산된 속성을 사용하여 구성 요소의 일부를 표시하거나 숨깁니다.

계산된 속성을 사용하여 구성 요소의 일부를 표시하거나 숨깁니다.

드롭다운 목록의 값을 기준으로 구성 요소의 일부를 표시하거나 숨기려고 합니다.폼의 이 부분을 이동하기 전에 계산된 속성을 사용하면 문제가 없습니다.하지만...내 컴포넌트에서 양방향 바인딩을 사용하고 있는데 사용 중인 속성의 계산된 값이 너무 늦게 업데이트되는 것 같습니다.다음은 구성 요소 js입니다.

Vue.component('system', {

    template: '#system',

    props: ['name', 'count'],

    computed: {
        issummit: function() {
            return this.name === '5a37fda9f13db4987411afd8';
        }
        // audiovideo: function() {
        //     return this.system === params.id.easy3eeg || this.system === params.id.easy3psg || this.system === params.id.essentia;
        // }
    },

    data () {
        return { 
            systemname: this.name,
            systemcount: this.count,
            systemoptions: [
                { text: 'Select One', value: null },
                { text: 'Summit', value:'5a37fda9f13db4987411afd8'},
                { text: 'Essentia', value:'5a37fda1de9e84bb9c44a909'},
                { text: 'Alterna', value:'5a8caadc86dc269de9887b0f'},
                { text: 'Easy III PSG', value:'5a37fe27b1e43d5ca589aee3'},
                { text: 'Easy III EEG', value:'5a37fd9a08a387d4efcf9ddb'},
                { text: 'IOMAX', value:'5a8cab59a1353f170f6e92a4'},
                { text: 'Cascade Pro', value:'5a8cab696f6a77f774e8de7f'}
            ]
        }
    },

    watch: {
        name (name) {
            this.systemname = name;
        },
        count (count) {
            this.systemcount = count;
        }
    },

    methods: {
        updateName: function() {
            this.$emit('update:name', this.systemname);
        },
        updateCount: function() {
            this.$emit('update:count', this.systemcount);
        }
    }
});

컴포넌트 템플릿입니다.

    <script type="text/x-template" id="system">
        <b-row>
            <b-form-group class="col-sm" label="Count">
                <b-form-input type="number" @change="updateCount" required v-model="systemcount" class="col-sm"></b-form-input>
            </b-form-group>
            <b-form-group class="col-sm" label="System">
                <b-form-select @change="updateName" :options="systemoptions" required v-model="systemname"></b-form-select>
            </b-form-group>

            <!-- Summit Options -->
            <template v-if="issummit">
                <b-form-group class="col-sm" label="Channels">
                    <b-form-input type="number" required v-model="summitchannels"></b-form-input>
                </b-form-group>
                <b-form-group label="Accessories">
                    <b-form-checkbox-group v-model="summitaccessories" :options="summitoptions">
                    </b-form-checkbox-group>
                </b-form-group>
            </template> 

        </b-row>
    </script>
    <script src="scripts/system.js"></script>

그리고 여기 사용 중인 템플릿이 있습니다.

<system v-for="system in systems"
    :name.sync="system.name"
    :count.sync="system.count">
</system>

계산된 값이 업데이트됩니다...다만, 렌더링의 판별에 사용되고 나서 갱신되는 것처럼 보이는 것이 문제입니다.드롭다운에서 [Summit]를 선택하면 컴포넌트의 숨겨진 부분이 표시됩니다.다른 항목을 선택할 때까지 표시되지 않습니다.두 번째로 선택할 때 이전 시도에서 계산된 값이 사용됩니다.

편집 일반 DOM 개체를 사용하도록 선택 항목을 편집하여 문제를 해결했습니다.그러나 이것은 템플릿으로 옮겼을 때에만 문제가 되었습니다.이전에는 모든 것이 잘 되었다...좋은 생각 있어?

<div role="group" class="col-sm b-form-group form-group">
    <label class="col-form-label pt-0">System</label>
    <div>
        <select @change="updateName" class="form-control custom-select" required v-model="systemname">
            <option v-for="o in systemoptions" :value="o.value">{{o.text}}</option>
        </select>
    </div>
</div>

https://jsfiddle.net/3vkqLnxq/1/에 최소한의 복제가 있습니다.

그것은 의도한 대로 작동한다.변경이 전부입니다.b-*태그가 dom으로 변경됩니다.

그래서 가장 가능성이 높은 원인은b-form-select에 문제가 있습니다.

계산된 속성 데이터 바인딩에는 getter 및 setter를 사용해야 합니다.

다음과 같은 경우:

computed: {
  issummit: {
    // getter
    get: function () {
      return this.name === '5a37fda9f13db4987411afd8';
    },
    // setter
    set: function (newValue) {
      this.systemname = newValue;
    }
  }
}

상세:

https://v1.vuejs.org/guide/computed.html#Computed-Setter

나는 비슷한 문제를 해결했다.

@change="updateName"

로.

@change.native="updateName"

(https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components)

이렇게 하면 문제를 해결할 수 있는 "진짜" 직접 변경 이벤트를 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/49167091/vue-js-using-a-computed-property-to-show-or-hide-part-of-a-component