Vue.js 使用计算属性来显示或隐藏组件的一部分答案

【问题标题】：Vue.js using a computed property to show or hide part of a componentVue.js 使用计算属性来显示或隐藏组件的一部分
【发布时间】：2018-08-16 10:49:32
【问题描述】：

我正在尝试根据下拉列表中的值显示/隐藏组件的一部分。在移动表单的这一部分之前，使用计算属性就可以了。但是......我在我的组件中使用了两种方式绑定，似乎我正在使用的属性的计算值更新得太晚了。这里是组件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>

【问题讨论】：

如何将值传递给道具名称？
我认为在检查动态属性时，在此类用例中 v-if 存在问题

标签： javascript vuejs2 vue-component

【解决方案1】：

我在https://jsfiddle.net/3vkqLnxq/1/有一个最小的复制

它按预期工作。变化是所有b-*标签都改为dom。

所以最可能的原因是b-form-select 有问题。

【讨论】：

似乎 b-form-select 是问题所在......不，为什么？在将其移至模板之前，我能够使用 b-form-select 并且效果很好。
您需要首先最小化您的复制。首先删除 b-form-select。
然后逐渐添加组件，直到问题重现。

【解决方案2】：

您应该使用 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

【讨论】：

【解决方案3】：

我通过更改解决了类似的问题

@change="updateName"

到

@change.native="updateName"

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

这让我可以使用“真正的”直接更改事件（而不是太晚的事件）来解决我的问题。

【讨论】：