javascript - 单击按钮时，Vue 通过键将值绑定(bind)到对象

Question

我是 Vue 的新手，我想根据我的数据创建一些按钮并在单击按钮时显示它们的信息。对象“pets”有两个键:id 和 info。 (我的数据比较大，代码比较复杂，这里尽量简化。)

data() {
  return {
    selectedpet: undefined,
    message: undefined,
    pets : [
      {
        id: 1,
        info: "yellow"
      },
      {
        id: 2,
        info: "brown"
      },
      {
        id: 3,
        info:"huge"
      }
    ]
  }
}

然后我通过数据创建了一些按钮，按钮上显示了'id'，变量'selectedpet'将记录点击的按钮:

<div v-for="pet in pets :key="pet.id">
<button @click="selectedpet = pet">
    <i>{{pet.id}}</i>
</button>  

我需要做的是创建一个 div，其中的文本将显示单击按钮的“信息”。如何将消息设置为点击按钮的“信息”？

<div id="printselectedpet">Selected pet: {{ message }}</div>

Answer 1

不需要消息数据

<div id="printselectedpet">Selected pet: {{ selectedpet.info }}</div>