Question

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

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

但这显示在我的用户界面中

我实际上希望下拉列表显示label字段，它是一个组名，我将获得它的值。返回值的结构如下：

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

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>

但是您实际上需要将<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>

Answer 2

您可以在html和js中这样使用。

实际上后面的代码不是组件。

示例HTML代码

<datalist id="browsers">
  <option v-for="lst in groupList" v-bind:value="lst">{{lst.label}}</option>  
</datalist>

示例Vue.js代码

data:{
  groupObj: {},
  groupList: []
},
methods:{
    groupList(){
        this.groupList = this.$store.getters['Groups/getGroups'];
    },    
},
mounted(){
 this.groupList();
}

Answer 3

我将问题理解为“如何使用vue.js中数据列表中的对象”

什么是数据列表？

数据列表仅提供用于填充其他控件的模板。
主要与文本输入一起使用，以提供组合框功能（还可以选择新内容）
这时浏览器中的实现差异很大，因此最好仅依赖基本的标签呈现（不要使用值，因为浏览器的处理方式不同）

与对象结合使用

想法是使用字符串并检查每个输入的更改（如果我们有完美匹配的话）。使用:value将在chrome中显示ID，这可能不是您想要的。这不适用于同名的标签，但同样，在这种情况下，这种输入几乎没有意义。

Vue.component('test-data-list', {
  props: ['label', 'options', 'value'],
  template: `
    <div>
      <label for="myinput">{{label}}</label>
      <input id="myinput" list="data" @change="change" :value="getValue">
      <datalist id="data">
        <option v-for="option in options">
          {{option.label}}
        </option>
      </datalist>
    </div>`,
  computed: {
    getValue() {
      return this.value ? this.value.label : '';
    }
  },
  methods: {
    change(e) {
      let value = e.currentTarget.value;
      if (value) {
        let sel = this.options.filter(c => c.label == value);
        if (sel.length == 1) {
          this.selection = sel[0];
        } else {
          this.selection = {
            label: value,
            isNew: true
          }
        }
      } else {
        this.selection = undefined;
      }
      this.$emit('input', this.selection)
    }
  }

});

new Vue({
  el: '#app',
  data() {
    return {
      result: undefined,
      groupList: [{
          label: "something",
          id: 1
        },
        {
          label: "this too",
          id: 2
        },
        {
          label: "something different",
          id: 3
        }
      ]
    };
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    Selected:
    <span v-if="result">
      "{{ result.label }}" 
      <span v-if="result.isNew">New!</span>
    <span v-else> old object with id:{{result.id}}</span>
    </span>
    <span v-else>nothing</span>
  </div>
  <test-data-list label="Select" :options="groupList" v-model="result"></test-data-list>
</div>

显示“ [Object object]”而不是Vue.js数据列表中的标签

3 个答案:

什么是数据列表？

与对象结合使用