Javascript vue.js如何在单击时将类绑定到v-S创建的列表项以使用模板组件？

我试图在单击模板组件中的列表项时将活动类应用于该列表项，这应该是独占的，并从所有其他列表项中删除该类

我曾尝试在单击时通过一个新的数据对象并引用它，我甚至在官方文档中使用了这个示例，但都没有用，我不知道为什么它不起作用

Vue.component（'delivery-options'）{
道具：[‘交付’]，
模板：'
{{deliveries.price}}{{deliveries.title}}
{{deliveries.desc}}
'
})
Vue.组件（“分类账”{
道具：['values']，
模板：“
{{values.title}{{{values.price}}
”
})
var checkout=newvue({
el:“#结账应用程序”，
数据：{
送货清单：[
{id:0，价格：''3.99英镑'，标题：“送货上门”，描述：“Lorem ipsum dolor sit amet.”，
{id:1，价格：'免费'，标题：'商店收藏'，描述：'Lorem ipsum dolor sit amet'，
{id:2，价格：'5.99英镑'，标题：'精确交付'，描述：'洛雷姆·伊普苏姆·多洛尔·希特·阿梅特'。}
],
估价员：[
{id:0，价格：'1233.99英镑'，标题：“订单价值”，描述：“Lorem ipsum dolor sit amet.”，
{id:1，价格：''3.99英镑'，标题：“交货”，描述：“Lorem ipsum dolor sit amet.”，
{id:2，价格：'5.99英镑'，标题：'总计'，描述：'您的总计包括交货。}
]
}
})

ul{
填充：0；
}
ulli{
列表样式类型：无；
}
.交付选择李{
填充：1rem；
保证金：1rem；
边界半径：3px；
边框：1px纯灰；
}
.账本{
填充：1rem；
保证金：1rem；
边界半径：3px；
边框：1px纯灰；
}

您需要执行以下操作：

console.clear（）
Vue.组件（“交付选项”{
道具：['deliveries'，“isActive”]，
模板：`{{deliveries.price}{{deliveries.title}
{deliveries.desc}
`
})
Vue.组件（“分类账”{
道具：['values']，
模板：“
{{values.title}{{{values.price}}
”
})
var checkout=newvue({
el:“#结账应用程序”，
数据：{
activeDelivery:null，
送货清单：[
{id:0，价格：''3.99英镑'，标题：“送货上门”，描述：“Lorem ipsum dolor sit amet.”，
{id:1，价格：'免费'，标题：'商店收藏'，描述：'Lorem ipsum dolor sit amet'，
{id:2，价格：'5.99英镑'，标题：'精确交付'，描述：'洛雷姆·伊普苏姆·多洛尔·希特·阿梅特'。}
],
估价员：[
{id:0，价格：'1233.99英镑'，标题：“订单价值”，描述：“Lorem ipsum dolor sit amet.”，
{id:1，价格：''3.99英镑'，标题：“交货”，描述：“Lorem ipsum dolor sit amet.”，
{id:2，价格：'5.99英镑'，标题：'总计'，描述：'您的总计包括交货。}
]
},
})

ul{
填充：0；
}
ulli{
列表样式类型：无；
}
.交付选择李{
填充：1rem；
保证金：1rem；
边界半径：3px；
边框：1px纯灰；
}
.账本{
填充：1rem；
保证金：1rem；
边界半径：3px；
边框：1px纯灰；
}
.主动{
颜色：红色
}

太棒了，谢谢你，我以前也有类似的东西，但它只是跟踪家长的点击，因此实际上根本没有更新任何东西