vue.js - 样式绑定不随模板结构更新 [Vue]

Question

在我的示例中，我想在单击元素后在元素周围绘制边框。在这个例子中，它完美地工作：

<div v-for="(parent, index) in $store.getters.getInfo" :key="index">
    <div @click="setClicked" :id="child.id" v-for="child in parent"
         :style="[child.clicked ? {'border-color': 'black'} : {'border-color': 'white'}]">
    </div>
</div>

但是当我尝试使用更复杂的结构和模板标签时，样式绑定无法触发：

    <div v-for="i in 12">
      <template v-for="(user, index) in $store.getters.getSharedUsers">
        <div :id="child.id" v-for="child in $store.getters.getSharedInfo[user[0]][i-1]" 
             :userID="child.userID" @click="setClicked"
             :style="[child.clicked ? {'border-color': 'black'} : {'border-color': 'white'}]">
        </div>
      </template>
    </div>

在我的突变中，我将属性设置为：

Vue.set(state.element_map[payload.uID][payload.dID], 'clicked', true);

当我调试时，我在调用 setClicked 函数后看到数据结构中两个代码示例的变化，但只有在第一个中触发了样式绑定并绘制了边框。我看到的唯一区别是模板标签的使用和更复杂的数据结构。但它也应该在第二个示例中工作，因为 clicked 属性设置正确。那么我错过了什么？谢谢！

标签： vue.js