javascript - 如何将对象从数据属性传递到VueJS中的方法

Question

首先是完整的示例:https://jsfiddle.net/3bzzpajh/

我想要实现的目标是将整个 person 对象传递给我的方法 showSelectedDat，出于某种原因附加 person 对象到像这样的数据属性: :data-person="person" 将对象更改为类似 [object Object] 的东西，这在我的方法中变得无用:

<div id="app">
  <select name="" id="" @change="showSelectedData($event)" >
    <option :value="person.name" :data-name="person.name"  v-for="person in people[0]"> {{ person.name }}</option>
  </select>
</div>

如上面的代码所示，我目前正在“传递人”名称，例如 :data-name="person.name" 但当人有很多属性时，这会变得很麻烦。

这是我的 vuejs 应用程序:

new Vue({
  el: '#app',
  data () {
    return {

      people: [{
        '1': {
          'code': 1010,
          'name': 'sam',
          'status': 'ACTIVE',
          'class': 'RED',
          'currencyCode': 'CHF'
        },
        '2': {
          'code': 1210,
          'name': 'jane',
          'status': 'ACTIVE',
          'class': 'WHiTE',
          'currencyCode': 'NA'
        },
        '3': {
          'code': 7777,
          'name': 'luis',
          'status': 'ACTIVE',
          'class': 'BLUE',
          'currencyCode': 'DE'
        },
        '4': {
          'code': 443,
          'name': 'dave',
          'status': 'ACTIVE',
          'class': 'GREEN',
          'currencyCode': 'FR'
        }
      }]

    }
  },
  methods: {
    showSelectedData: function (event) {
      console.log(event.target.selectedOptions[0].dataset.name)
    }
  }
})

那么，回顾一下，当选择下拉列表时，如何在 showSelectedData 中获取 person ？

Answer 1

这通常是在 Vue 中通过使用 v-model 将数据元素绑定(bind)到选择来完成的。

定义一个名为selectedPerson的数据元素。

data:{
  selectedPerson: null,
  ...
}

引用使用v-model。

<select v-model="selectedPerson">

使用人员作为选项中的值。

<option :value="person" v-for="person in people[0]"> {{ person.name }}</option>

现在，每当选择一个人时，selectedPerson 将是整个人。您根本不需要使用 change 事件，不需要将其绑定(bind)到数据，也不需要通过索引查找它。当您需要选定的人时，只需引用该数据值即可。