Vue.js 更改v-list-item的值时取消选择v-list-item

我有一个

v-list-item-group

，里面有一些

v-list-item

，还有一个相关的

值。问题是，当我更改所选
v-list-item
的
值时，它不会做出反应。我希望仅当新的
值
与
v-list-item-group
的模型匹配时才选中它，否则将取消选中。实现这种行为的最佳方式是什么

。当您编辑列表项值时，例如，通过将左下角字段从“Bluetooth”更改为“Bluetooth1”，我希望列表项自动取消选择，因为其
值
不再与
v-list-item-group
的
型号
（“Bluetooth1”！=“Bluetooth”）匹配。当你把它改回“蓝牙”时，我希望它再次被选中。
右边的一个修改了
v-list-item-group
的模型，它可以按预期工作

我的实际用例是快速呈现数千个元素的列表，而不呈现所有元素。为了实现这一点，我在
v-list-item-group
中使用了一个组件来管理它的项目。它创建了几十个
v-list-item
s，当用户滚动时，它通过移动它们并用我的数组中的相应数据替换它们的值、图标和文本来重用它们。问题是，当用户选择某个列表项，然后滚动列表时，所选项会被重用。尽管它现在具有不同的值、文本和图标，但它看起来仍然是选中的。因此，他们认为这就像选择了不同的项目一样。
我希望这对您有用：

<v-list-item-group v-model="model" :color="color">
// other html


不是100%清楚你想要实现什么-我认为选择工作正常。我可以选择/取消选择，选择显示在右下角的输入上。但是我不确定你想要用左下角的输入实现什么。输入的目的是什么？它应该做什么？因此，您只希望在左输入和右输入都匹配的情况下选择项目。我用
v-list-item-group
玩了一会儿，tbh文档没有给我太多选项。你能告诉我更多关于你的用例吗？也许使用另一个组件更容易？编辑了我的问题并添加了我的用例说明。“因此，您只希望在左输入和右输入都匹配时选择项目”是的，本例中您是对的。在我的实际用例中，任何元素都可能改变，而不仅仅是一个。因此，当用户滚动时，初始选择的项目应该保持选中状态，或者取消选择。由于我无法在
v-list-item-group
组件中找到以编程方式取消选择的方法，我可能会选择第一个选项，在滚动时保留初始选择-这是我可以使用的：）我会告诉你不，硬编码颜色不是一个选项，因为我的应用程序使用vuetify主题。即使没有，它看起来也不是一个可靠的解决方案。您没有解释为什么它不是一个可靠的解决方案……尽管如此，vue实例上提供了主题道具。（例如，$vuetify.theme.themes.light.primary）并可定制。除颜色外，还有不同的因素。例如，即使您完全更改了颜色，辅助功能使用的
aria selected
属性也不会更改。
computed: {
  color(){
    if (this.model == this.items[1].text) {
        return 'indigo'
    } else {
        return 'black'
    }
  }
}