Vue.js 计算出的Vue组件没有反应

我有两个组件OperatorList和OperatorButton。 操作员列表当然包含我的按钮，我只想在单击一个按钮时更新一些数据：

• 我使用operator.id发出select
• OperatorList组件捕获此事件，该组件在存储中调用setSelectedOperator

• 这里的第一个问题是，在Vue工具中，我可以在Vuex选项卡上看到存储实时更新，但在Components选项卡上，操作员计算的对象在我单击树中的另一个节点之前不会更新：我不知道这是Vue工具中的显示问题还是真正的数据更新问题

• 但是，完成后，我在Vue根元素上有另一个名为selectedOperator的计算属性，该属性应返回。。。所选运算符：其值始终为空，我不明白为什么

• 最后，在按钮上，我有一个v-bind:class，它应该在operator.selected属性为true时更新：它永远不会更新，即使我可以看到属性设置为true

我刚开始使用Vue，我很确定我做错了什么，但是什么？ 在使用Vuex之前，我也遇到了同样的问题，使用道具

这是我的操作员列表代码：

<template>
    <div>
        <div class="conthdr">Operator</div>
        <div>
            <operator-button v-for="operator in operators" :op="operator.id" 
            :key="operator.id" @select="selectOp"></operator-button>
        </div>
    </div>
</template>
<script>
    import OperatorButton from './OperatorButton';
    export default {
        name: 'operators-list',
        components : {
            'operator-button': OperatorButton
        },
        computed : {
            operators() { return this.$store.getters.operators },
            selected() {
                this.operators.forEach(op =>{
                    if (op.selected) return op;
                });
                return null;
            },
        },
        methods : {
            selectOp(arg) {
                this.$store.commit('setSelectedOperator', arg);
            }            
        },
    }
</script>

---

您在

vuex

中为

operators

选择的getter始终设置为false

operators : (state) => { 
        if (Array.isArray(state.periods)) 
        {
            let ops = state.periods
            .map( item => {
                return item.operators
            }).flat();
            ops.forEach(op => {
                op.selected=false;
            })
            return ops;
        }
    }

---

我猜你这样做是为了初始化，但这是一个不好的地方，因为你永远不会从那个getter中得到一个选中的操作符。把它移到合适的位置

setInitialData

似乎是正确的位置。

您在

vuex

中为

运算符设置的getter总是被选中为false

operators : (state) => { 
        if (Array.isArray(state.periods)) 
        {
            let ops = state.periods
            .map( item => {
                return item.operators
            }).flat();
            ops.forEach(op => {
                op.selected=false;
            })
            return ops;
        }
    }

我猜你这样做是为了初始化，但这是一个不好的地方，因为你永远不会从那个getter中得到一个选中的操作符。把它移到合适的位置
setInitialData
似乎是正确的位置。
最后我找到了问题的根源：
$el.attributes.initialdata.value
来自一个API，它包含的操作符对象没有选择的
属性，所以我在设置数据后添加了它，它不是被动的。
在转换为JSON并发送到Vue之前，我只是在服务器端添加了此属性，删除了Radu Diță指出的代码，因为它现在已经无用，并且可以正常工作。
最后我找到了问题的根源：
$el.attributes.initialdata.value
来自一个API，它包含的操作符对象没有选择的
属性，所以我在设置数据后添加了它，它不是被动的。
在转换为JSON并发送到Vue之前，我只是在服务器端添加了这个属性，删除了Radu Diță指出的代码，因为它现在没用了，并且可以工作。
你完全正确，我将它更改为
if（ops.selected==undefined）op.selected=false但是它不能解决我的问题。此函数中的console.log（op）显示，当数据更改时，它不会运行，仅在页面加载上。您完全正确，我将其更改为
if（ops.selected==undefined）op.selected=false但是它不能解决我的问题。此函数中的console.log（op）显示，当数据更改时，它不会运行，只在页面加载时运行
operators : (state) => { 
        if (Array.isArray(state.periods)) 
        {
            let ops = state.periods
            .map( item => {
                return item.operators
            }).flat();
            ops.forEach(op => {
                op.selected=false;
            })
            return ops;
        }
    }