Javascript 如何在Vue.js中获取HTML 5数据-*值？

假设我有：

<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中获取

数据类型
值

我想将所选选项
数据类型
值传递给Vue.js typeMapper方法，并在
span
标记中显示结果

我不知道如何将
数据类型
值传递给Vue.js

附言：

我使用的是Vue.js 2
您的数据不是真正的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>

这里有一个问题。
我不知道为什么要从给定的html5结构中收集数据集。因为您通常希望通过ajax调用获取该选项，或者通过其他组件或其他任何组件设置select选项

但是，如果您想从html结构中获取给定的元素，您可以这样做


HTML

这远远不是最佳的或跨浏览器的变体。如果我是你，我会放弃这种方法。
你只需要知道所选选项的数据类型是什么，还是出于某种原因特别需要绑定到数据类型？我只需要知道所选选项的数据类型
<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>

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
    <div id="vue-app">
      <select class="form-control" v-on:change="typeMapper">
      <option data-type="" value="">Select Type</option>
      <option data-type="typeA" value="1">typeA</option>
      <option data-type="typeB" value="2">typeB</option>
      <option data-type="typeC" value="3">typeC</option>
    </select>
    <span>{{ gateway }}</span>
    </div>

const app = new Vue({
    el: '#vue-app',
    data: {
      gateway: "",
    },
    methods: {
        typeMapper: function (event) {
          this.gateway = event.target[event.target.value].dataset.type;
        }
    }
});