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

Question

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

到目前为止，我可以在提供选项并具有类型完成功能的组件内创建数据列表。但是，当我尝试将其转换为VueJS组件并将数据数组作为属性传递时...我的选项列表不再呈现

两个数据列表元素...

排名第一的是“原始”数据列表，该列表可以100％工作

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

当我像第一个鼠标一样将鼠标悬停在这里时...

数据列表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

设置属性“列表”等于数据列表的属性“ id”。

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

致谢

Answer 2

如果Alfredo Lanzetta发布他的答案，则您应该接受他的答案，因为他是第一个出现的。我只想解释为什么该解决方案有效。

如果您具有以下代码，则希望在其中输入列表的下拉列表

modifié :         .env
modifié :         .gitignore
modifié :         composer.lock
modifié :         config/packages/doctrine.yaml
modifié :         symfony.lock

要正确地将<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的ID。从代码示例中可以看到，datalist的ID为datalist，但是输入字段的de yourdatalist属性设置为list，因此它正在寻找一个data_input和ID datalist。由于没有data_input带有说出的ID，因此您看不到该下拉列表。