Javascript VueJS更改表格'；在一个循环中，每个循环都有一行

我正努力思考这背后的逻辑：

我使用VueJS在表中显示数据库中的一些记录，并以友好方式显示它，因此过滤、分页等，我还希望当我单击一行时，它就像一个单击的按钮，并更改其背景颜色，然后它应该“向上滑动”以显示该行的完整内容（就像一个完整的反应式UI），但让我们关注背景颜色的变化：内容在表中，Vue加载它从我的端点获得的所有内容并显示它，我创建了类

。选择了
，并编辑了
tbody
上的v-for循环，将所选类绑定到
所选的
变量，然后单击启动函数以更改变量true\false值

问题是，如果我单击一行，每行的颜色都会发生变化，因为它们都共享相同的类名，并且在一行上触发它，则每行都会触发它

由于我还没有共享任何代码，这里是tbody的全部荣耀，我不会键入Vue实例，因为它非常简单：数据中有一个变量（
selected=false
），方法中有一个函数（
isSelected
）

我已经检查了一些警报，并且密钥已正确传递到所选函数，即：

selected: function (key) {
        this.posts[key].selected = !this.posts[key].selected;

      } // end function

另外，当我从api调用中获取对象时，我会创建所选属性，
当我单击行时，它有效地切换到了正确的对象，问题是，颜色没有改变，因此类绑定
：class=“{selectedRow:post.selected}”
在我单击时没有切换类，
post.selected
是要提供的正确数据吗？（已创建并更改背景颜色中的selectedRow类）

添加更多信息以防其他人出现在这里：

正如注释中所建议的，将
this.$forceUpdate（）
添加到我的
selected（key）
函数可以解决以下问题：

selected: function (key) {
        this.$forceUpdate();
        this.posts[key].selected = !this.posts[key].selected;
      } // end function

那么这里的问题是什么？
您是否尝试过将unique key作为参数
selected（key）
？@Deda isSelected（）函数唯一做的事情就是将所选值从false改为true，反之亦然，我可以传递key，但如何使用它呢？您是如何用经典的方式在每一行上绑定类的
.tr{…}？
为每个帖子添加一个
selected
属性。然后使用根据帖子的
选择的
值为每行分配一个类。@HusamIbrahim我已经尝试了你建议的内容Husam，我编辑了原始帖子，请看一看
selected: function (key) {
        this.posts[key].selected = !this.posts[key].selected;

      } // end function

selected: function (key) {
        this.$forceUpdate();
        this.posts[key].selected = !this.posts[key].selected;
      } // end function