Question

我是Vue的新手，我想从我的数据创建一些按钮，并在点击按钮时显示他们的信息。对象＆＃39;宠物＆＃39;有两个键：id和info。（我的数据更大，我的代码更复杂，我试图在这里简化它。）

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

我创建了一些带有＆＃39; id＆＃39;的数据按钮。显示在按钮上，变量＆quot; selectedpet＆＃39;将记录点击的按钮：

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

我需要做的是创建一个div，该文本将显示＆＃39; info＆＃39;点击按钮。如何将消息设置为＆＃39; info＆＃39;点击按钮？

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

Answer 1

无需message数据

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

Answer 2

我认为你只需要将pet.info设置为消息。

见下面的代码：

＆＃13;

var vm = new Vue({
  el : "#vueRoot",
  data: {
    selectedpet: undefined,
    message: undefined,
    pets : [
      {
        id: 1,
        info: "yellow"
      },
      {
        id: 2,
        info: "brown"
      },
      {
        id: 3,
        info:"huge"
      }
    ]
	}
});

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="vueRoot">
  <div v-for="pet in pets" :key="pet.id">
    <button @click="message = pet.info">
        <i>{{pet.id}}</i>
    </button>
  </div>
  <div id="printselectedpet" v-if="message">Selected pet: {{ message }}</div>
</div>

＆＃13;

按钮单击时，按键将值绑定到对象

2 个答案: