vue.js - '[Object object]' 在 Vue.js 数据列表中显示而不是标签

Question

我正在使用<datalist>下拉菜单在我们的项目中显示组名。

<data-list
    ref="groupName"
    name="groupName"
    label="Groups: "
    :options="groupList"
></data-list>
.....
methods:{
    groupList(){
        return this.$store.getters['Groups/getGroups']
    }
}

但这显示在我的 UI 中：

我实际上希望下拉菜单显示该label字段，这是一个组名，我会得到它的值。返回值的结构如下所示：

[
 {label: "test", value: 14},
 {label: "Test1", value: 16},
 {label: "Test2", value: 17},
 {label: "Test3", value: 18},
]

标签： vue.jshtml-datalist

Answer 1

似乎错误在您的data-list组件中。很可能你有这样的事情：

<!-- XXX: DON'T DO THIS -->
<option v-for="option in options" :value="option">{{option}}</option>

Vue.component('data-list', {
  props: ['label', 'options'],
  template: `
    <div>
      <label for="myinput">{{label}}</label>
      <input id="myinput" list="mydata">
      <datalist id="mydata">
        <!-- XXX: DON'T DO THIS -->
        <option v-for="option in options" :value="option">
          {{option}}
        </option>
      </datalist>
    </div>`,
});

new Vue({
  el: '#app',
  data() {
    return {
      groupList: [
        {label: "test", value: 14},
        {label: "Test1", value: 16},
        {label: "Test2", value: 17},
        {label: "Test3", value: 18},
      ]
    };
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <data-list label="Groups: " :options="groupList"></data-list>
</div>

但您实际上需要将 to 的值<option>及其option.value内部文本设置为{{option.label}}（匹配您的项目的数据结构）：

<option v-for="option in options" :value="option.value">{{option.label}}</option>

Vue.component('data-list', {
  props: ['label', 'options'],
  template: `
    <div>
      <label for="myinput">{{label}}</label>
      <input id="myinput" list="mydata">
      <datalist id="mydata">
        <option v-for="option in options" :value="option.value">
          {{option.label}}
        </option>
      </datalist>
    </div>`,
});

new Vue({
  el: '#app',
  data() {
    return {
      groupList: [
        {label: "test", value: 14},
        {label: "Test1", value: 16},
        {label: "Test2", value: 17},
        {label: "Test3", value: 18},
      ]
    };
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <data-list label="Groups: " :options="groupList"></data-list>
</div>