Question

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

在组件中，v-for v-if mapped检查选择项目是否已被其他组件使用（通过查看mapped列表项对象上的属性）。

测试一下，一切似乎按预期工作，vuex存储获取列表，它接受更新，一旦调用了save，目标字段被标记为v-if并且该映射属性是可见的在vuex调试面板中。

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

在组件的另一个实例中选择了选择项后，我希望其他组件删除该选项 - 但是在初始加载后，<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 } } }似乎没有被重新评估。组件？

对不起，这是基本的组成部分：

geth attach
Fatal: Unable to attach to remote geth: no known transport for URL scheme "c"

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中的计算属性未反映在选择列表

1 个答案: