Компонент VueJS с списком данных не показывает параметры

Question

Я использую VueJS и его компоненты для создания большой серии списков данных и селекторов ... все с кнопкой отправки в конце, когда форма проверена ...

пока я могу сделатьсписок данных внутри компонента, который отображает параметры и имеет завершение типа ... отлично работает!НО, когда я попытался превратить вещь в Компонент VueJS и передать массив данных как свойство ... мой список параметров больше не отображает

Два элемента Datalist ...

Верхний - это «необработанный» список данных, который работает на 100%

Но когдаЯ перехожу к версии компонента vue.js, в качестве опции ничего не отображается ...

это просто не там, когда я наведите курсор мыши, как первыйone ...

Компонент данных VueJS

<template>
    <div>
      <input type="text" v-model="item" list="data_input" v-on:input="selectionChanged">
        <datalist id="yourdatalist">
          <option v-for="item in data_input">{{item}}</option>
        </datalist>
    </div>
</template>

<script>
export default {
  name: 'Datalist',
  props: ['inputDataList'],
  data () {
    return {
      selection: '',
      item:'',
      data_input:this.inputDataList
    }
  },

methods: {
  selectionChanged: function(element) {
    console.log("selection = "+this.selection+", new value = " + element.target.value);
    var newSelection = element.target.value;

    if (newSelection != this.selection) { 
      // newSelection changes on every keystroke, so you must keep diffing it with your known data
      for (var i=0; i<this.data_input.length; i++) {
        if (this.data_input[i] == newSelection) {
          this.selection = newSelection
          console.log("selection = "+this.selection+" now");
          this.$emit('selectionChanged', this.selection);
        }
      }
    }
  },
},
}
</script>

Вызывающий компонент HTML-код

<p>Examples of Datalists</p>
<input type="text" v-model="film" list="films" v-on:input="filmChanged">
    <datalist id="films">
        <option v-for="film in films">{{film}}</option>
    </datalist>
<div v-if="focusedfilm">
  <h6>You have picked {{focusedfilm}}</h6>
</div>
<br/>
<p>Examples of Child Component Datalist</p>
<Datalist :inputDataList="films"/>

Answer 1

Если Альфредо Ланцетта опубликовать его ответ, вы должны принять его, потому что он пришел с ним первым.Я просто хочу объяснить, почему решение работает.

Если у вас есть следующий код, в котором вы хотите разместить выпадающий список для поля ввода

<input type="text" v-model="item" list="data_input" v-on:input="selectionChanged">
<datalist id="yourdatalist">
  <option v-for="item in data_input">{{item}}</option>
</datalist>

Чтобы правильно назначить datalist дляполе ввода, поле ввода должно иметь ссылку на указанный datalast.Это можно сделать с помощью свойства list поля ввода.

Чтобы связать их, нужно задать для свойства list поля ввода значение идентификатора datalist.Как вы можете видеть на примере своего кода, datalist имеет идентификатор yourdatalist, но для поля ввода свойство list имеет значение data_input, поэтому он ищет datalist с идентификатором data_input.Поскольку с указанным идентификатором datalist нет, вы не сможете увидеть этот список.

Answer 2

Установите атрибут 'list' равным атрибуту 'id' списка данных.

Измените <datalist id="yourdatalist"> на <datalist id="data_input">

С уважением