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]

0 个答案: