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

【问题标题】：How to get HTML 5 data-* values in Vue.js?如何在 Vue.js 中获取 HTML 5 data-* 值？
【发布时间】：2017-07-16 07:17:06
【问题描述】：

假设我有这个：

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

PS：

我正在使用 Vue.js 2

【问题讨论】：

您只需要知道所选选项的数据类型是什么，还是出于某种原因您特别需要绑定到数据类型？
我只需要知道所选选项的数据类型

标签： javascript vue.js vuejs2

【解决方案1】：

我不知道您为什么要从给定的 html5 结构中收集数据集。因为您通常希望通过 ajax 调用或通过其他一些组件或其他方式设置选择选项。

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

codepen

HTML

    <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;
        }
    }
});

这远非最佳或跨浏览器变体。如果我是你，我会放弃这种方法。

【讨论】：

【解决方案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>

还有 Vue 代码：

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

这是working fiddle。

【讨论】：