Class Vuejs类绑定在初始渲染时不起作用

我遇到了一个奇怪的问题，VueJS在第一次加载页面时没有在v-for循环中的项上设置类。在我单击它以打开和关闭选定属性后，它会工作，但当“选定”最初为true时，该行不会高亮显示。因此，需要2次单击才能将屏幕与数据同步

<tbody>
  <tr v-for="v in listOfItems" :key="v.id" :class="{ selected: v.selected }" v-on:click="function(){ itemSelected(v) }">
     <td style="text-align:right"><span v-text="v.selected"></span></td>
     <td style="text-align:right"><span v-text="v.label"></span></td>
   </tr>
</tbody>

function itemSelected(row) {
    row.selected = !row.selected
    app.$nextTick(function() {
        console.log( $('tr.selected').length )
    })
    return false
}

---

所有其他数据都会正确显示，即使选中，也会在表格单元格中显示true。只有选定的类在我单击两次（一次取消选择，另一次重新选择）之后才开始应用。

将代码放入此处的代码段中，它会按预期工作。您的问题可能和如何加载列表项有关，但很难说。您可能希望复制此代码段，并查看是否可以引入更多原始代码过程，以查看是否可以重现错误

从各个方面来说，制作这样一个片段都是一个好主意：它可以帮助你自己发现问题；它可以确定问题是否存在于您认为存在的代码中；它给你练习；它为潜在的回答者提供了一个起点。我真希望有更多的人会这样做

const app=新的Vue{ el:“应用程序”， 数据：{ 项目列表：[{ id:100， 标签：“项目100”， 所选：真 }] }, 方法：{ itemSelectedrow{ row.selected=！row.selected 应用程序$nextTickfunction{ console.log$'tr.selected'。长度 } 返回错误 } } }; .选定{ 背景颜色：浅灰色； }

---

为什么不只是v-on:click=v.selected=！v、 选中？您能否澄清屏幕显示前的含义？在Vue生命周期中，您什么时候加载ListoItems？感谢您的回复。我将尝试处理每个注释：首先，函数代替内联切换的原因是函数做了与应用程序相关的其他事情-为了简单起见，这里删除了它。至于使用代码片段，我直到现在才知道SO的这个特性，所以谢谢。最后，至于如何或何时加载ListoItems，为什么何时才重要？当我在调试控制台中检查它时，值是正确的。当数据加载时，反应性不应该做它的事情吗？你的代码片段看起来确实有效，所以我很困惑为什么不使用我的代码片段。如果以反应性的方式加载数据，那么反应性就会起作用。虽然我不知道你所描述的是什么会使它反应，但你有可能做到。我发现了这个问题。在我的SPA中，当从一个屏幕移动到下一个屏幕时运行的转换函数有一行代码可以重置所有选定的类，而不管数据模型如何！它是$'.selected'.removeClass'selected'，框架在页面加载时运行它。很难找到。所以Vue的反应毕竟是有效的。对不起兔子洞，但我真的很感谢所有的帮助！

app.listOfItems = [{
    id: 100,
    label: 'Item 100',
    selected: true
}]