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！

P.S：

我正在使用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。

Answer 2

我不清楚你为什么要从给定的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>

JS

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

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

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

2 个答案: