Datalist在一个简单的vue例子中消失

Question

尝试从数据列表 select 更新数据属性的时间间隔。

我的代码有什么问题？

http://jsfiddle.net/startflorin/gr6b1h7j/18

安装间隔：

setInterval((ctx) => { ctx.notification = "111"; }, 500, this);
setInterval((ctx) => { ctx.notification = "222"; }, 500, this);

数据：

data: {
    notification: null,
    demoList:[
        {
            id: 1,
            name: "option 1",
        },
        {
            id: 2,
            name: "option 2",
        },
        {
            id: 3,
            name: "option 3",
        },
    ],
},

我的HTML代码：

<div>
    {{ notification }}
</div>

<input list='demoList' v-on:change="selectSymbolList(target.value)">

<datalist id="demoList">
    <option v-for="item in this.demoList" v-bind:value="item.name" v-bind:key="item.id">{{ item.name }}</option>
</datalist>

Answer 1

要缓存 <input> 和 <datalist> 的呈现（将它们与组件模板中不相关的更改隔离），将它们放入 component:

Vue.component('demo-list', {
  props: ['items'],
  template: `<div>
    <input list='demoList'>
    <datalist id="demoList">
      <option v-for="item in items" v-bind:value="item.name" v-bind:key="item.id">{{ item.name }}</option>
    </datalist>
  </div>`
})

请注意，此示例需要 runtime compiler to compile the template string. Otherwise, render functions 而不是 template。

然后在您的应用模板中使用该组件：

<div id="app">
  <div>{{ notification }}</div>

  <demo-list :items="demoList"></demo-list>
</div>

demo

Datalist在一个简单的vue例子中消失

Datalist disapearing in a simple vue example

vue.js

datalist