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

【问题标题】：Vue bind value to object by key when button click按钮单击时，Vue按键将值绑定到对象
【发布时间】：2018-08-03 10:58:14
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript html button vue.js onclick

【解决方案1】：

不需要message 数据

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

【讨论】：

【解决方案2】：

我想你只需要将 pet.info 设置为 message。

见以下代码：

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

<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>

【讨论】：

【解决方案3】：

以下是我的解决方案

new Vue({
el:"#app",

data:{
message:"I am initial message",
buttonz:[{id:1,info:"this is first button"},{id:2,info:"this is secoind button"},{id:3,info:"this is my third button"}]
},
methods:{
getMyKey(myKey){
if(myKey != undefined){
this.message = this.buttonz[myKey].info;
}else{
this.message = "Cannot Get the Key";

}
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
<div>
{{message}}
</div>
<button v-for="(but,index) in buttonz" :key="but.id" @click="getMyKey(index)">
My ID: {{but.id}}
</button>
</div>

【讨论】：