vue 中的计算属性未反映在 select 列表中

Question

我有一个 vue 组件，用于创建包含所有可用选项的 select 列表。 save 方法将保存的值放入 vuex 存储中。可用字段是使用组件上的计算属性生成的，该组件为列表调用 vuex getter。

在组件中，有一个 v-for 和一个 v-if 检查 select 项目是否已经被另一个组件使用（通过查看 mapped 属性在列表项对象上）。

测试这个，一切似乎都按预期工作，vuex 存储获取列表，它接受更新，一旦调用保存，目标字段被标记为 mapped 并且映射属性在vuex调试面板可见。

但是，页面上的其他 select 列表不会更新以反映（现在更短的）可用选项列表。

一旦 select 项目在该组件的另一个实例中被 select 编辑，我希望其他组件删除该 select 选项 - 但它显示 v-if是不是在组件初始加载后重新求值？

抱歉，这是基本组件：

<template>
    <div class="row">
        <div class="col-4">
            {{ item.source_id }}
        </div>
        <div class="col-8">
            <select v-model="destination" class="form-control form-control-sm">
                <option v-for="dest in destinationFields" v-if="shouldShow(dest)" v-bind:value="dest.id">{{ dest.id }} - {{ dest.label }} ({{ dest.dataType }})</option>
            </select>
        </div>
    </div>
</template>

<script>
export default {
    props: ['item'],
    data() {
        return {
            destination: ''
        }
    },
    methods: {
        shouldShow: function(dest) {
            if (this.hideDestination && (!dest.hasOwnProperty('mapped') || dest.id === this.destination)) {
                return true
            } else if (!this.hideDestination) {
                return true
            }

            return false
        }
    },
    computed: {
        destinationFields: function() {
            return this.$store.getters.visibleDestination
        },
        hideDestination: function() {
            return this.$store.getters.hideMappedDestinations // boolean 
        }
    }
}

Answer 1

我认为更好的方法是已经在计算函数中过滤数据，如下所示：

computed: {
    destinationFields: function() {
        return this.$store.getters.visibleDestination()
            .filter(dest => !dest.hasOwnProperty('mapped') || dest.id === this.destination)
    },
    hideDestination: function() {
        return this.$store.getters.hideMappedDestinations // boolean 
    }
}

您还必须将模板更改为：

<select v-model="destination" class="form-control form-control-sm">
    <option v-for="dest in destinationFields" v-bind:value="dest.id">{{ dest.id }} - {{ dest.label }} ({{ dest.dataType }})</option>
</select>

vue 中的计算属性未反映在 select 列表中

Computed properties in vue not reflected in select list

vue.js

vuejs2

vue-component

vuex