[Vuejs]-'[Object object]' is displayed instead of label in Vue.js datalist

by

0👍

It seems the bug is in your data-list component. Most likely you have something like this:

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

But you actually need to set the value of <option> to option.value and its inner text to {{option.label}} (matching your item’s data structure):

<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>
👤tony19

0👍

you can to use like this in html and js.

actually following code is not a component.

sample HTML code 

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

sample Vue.js code

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

0👍

I understand the question as “How to work with objects in datalists in vue.js”

what are datalists?

  • datalists provides just templates to fill other controls.
  • mostly used with text input to provide combobox functionallity (allow also new content to be selected)
  • At this time implementation in browsers vary greatly, so better to just rely on basic label rendering (don’t use value, since browsers handle it differently)

using it in vue with objects

Idea is to use strings and check on every input change if we have a perfect match. Using :value will show the id in chrome, which is probably not what you want. This doesn’t work with same-named labels, but then again, such an input makes little sense in that case.

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>
👤estani

Leave a comment