javascript - 如何在 Vue.js 中获取 HTML 5 data-* 值？

Question

假设我有这个:

<select class="form-control" name="gateway">
  <option data-type="typeA" value="1">Test String</option>
  <option data-type="typeB" value="2">Test String</option>
  <option data-type="typeC" value="3">Test String</option>
</select>
<span>@{{ typeMapper(data-type) }}</span>

这是我的 Vue.js 脚本:

const app = new Vue({
    el: '#vue-app',

    data: {},

    methods: {
        typeMapper: function (type) {
            var array = {
                'typeA':'You selected Type A',
                'typeB':'You selected Type B',
                'typeC':'You selected Type C',
            };
            return array[type];
        }
    }
});

现在如何在 Vue.js 中获取 data-type 值？

我想将选定的选项 data-type 值传递给 Vue.js typeMapper 方法，并在 span 标记中显示结果。

我不知道如何将 data-type 值传递给 Vue.js !

附言:

我正在使用 Vue.js 2

Answer 1

您的数据不是真正的 javascript 数组，所以我使用 Object.keys 函数来获取键名。这里有一个快速的方法来做你正在寻找的事情:

<div id="app">
  <select class="form-control" name="gateway">
    <option v-for="(key,index) in Object.keys(array)" :value="index+1" :data-type="key">
      {{ array[key]}}
    </option>
  </select>
</div>

以及 Vue 代码:

new Vue({
  el: '#app',
  data: {
    array: {
      'typeA': 'You selected Type A',
      'typeB': 'You selected Type B',
      'typeC': 'You selected Type C',
    }
  }
});

这是一个 working fiddle .