Question

以下是完整示例：https://jsfiddle.net/3bzzpajh/

我想要实现的是，将整个person对象传递给我的方法showSelectedDat，由于某种原因将person对象附加到数据属性，如：{{1将对象更改为:data-person="person"之类的内容，在我的方法中变得无用：

[object Object]

如上面的代码所示，我目前正在＆＃34;传递人物＆＃34;名称如<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>但当人有许多属性时，这会变得很麻烦。

这是我的vuejs应用程序的地方：

:data-name="person.name"

那么，重新评估一下，当选择下拉列表时，如何在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) } } })内获得person？

Answer 1

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

定义名为selectedPerson的数据元素。

data:{
  selectedPerson: null,
  ...
}

使用v-model引用该内容。

<select v-model="selectedPerson">

使用person作为选项中的值。

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

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

Answer 2

您可以使用v-model存储选定的对象键，稍后使用保存的键获取person对象。当然你可以使用任何其他标识，例如你可以保存对象ID，如果它实际上有一个，稍后只需通过该ID找到对象。

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

new Vue({
  el: '#app',
  data () {
    return {
      current_person_key: -1,
      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) {
        var person = this.people[0][this.current_person_key];
        console.log(person)
    }
  }
})

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

2 个答案: