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

Question

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

到目前为止，我可以在呈现选项并具有类型完成功能的组件中创建数据列表。效果很好！但是当我试图把它变成一个 VueJS 组件，并将数据数组作为 属性 传递时...我的选项列表不再呈现

两个 Datalist 元素...

排名第一的是 "raw" 数据列表，它的工作效率为 100%

但是当我转到 vue.js 组件版本时，没有显示任何选项...

它只是不存在，当我像第一个一样将鼠标悬停在...

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>

调用组件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

设置属性 'list' 等于数据列表的属性 'id'。

改变 <datalist id="yourdatalist"> 至 <datalist id="data_input">

此致

Answer 2

如果Alfredo Lanzetta post他的回答，你应该接受他的，因为他先来了。我只想解释为什么该解决方案有效。

如果您在以下代码中需要输入字段的下拉列表

<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 分配给输入字段，输入字段需要有一个 link 来表示 datalast。您可以使用输入字段的 list 属性 来做到这一点。

方法link的两种，就是将输入框的list属性设置为datalist的id。正如您在代码示例中看到的那样，datalist 的 ID 为 yourdatalist，但输入字段的 list 属性 设置为 data_input，因此它正在寻找 ID 为 data_input 的 datalist。由于没有 datalist 具有所述 ID，因此您看不到该下拉列表。