数据列表不显示选项的VueJS组件

Question

我正在利用VueJS及其组件构建一系列大型数据列表和选择器。。当表单被验证时，所有表单的末尾都有一个提交按钮。。。

到目前为止，我可以在呈现选项并具有类型完成的组件内创建一个数据列表。。很好！但是当我试图将它转换为VueJS组件，并将dataarray作为属性传入时。。。我的选项列表不再渲染

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

<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

如果阿尔弗雷多·兰泽塔（Alfredo Lanzetta）发布了他的答案，你应该接受他的答案，因为他是第一个给出答案的。我只是想解释一下为什么这个解决方案有效。

如果您有以下代码，其中需要输入字段的Drop溺水列表

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

要正确地将datist分配给输入字段，输入字段需要具有指向所述datalast的链接。您可以使用输入字段的list属性来执行此操作。

链接两者的方法是将输入字段的list属性设置为datalist的id。正如您在代码示例中看到的，datalist具有idyourdatalist，但输入字段将delist属性设置为data\u input，因此它正在寻找id为data\u input的datalist。由于没有具有所述id的数据列表，因此您无法看到dropcrowd列表。

Answer 2

将属性列表设置为等于数据列表的属性id。

更改<代码>

当做