数据列表消失在一个简单的 vue 示例中

问题描述

当数据属性按时间间隔更新时，尝试从数据列表中进行选择。

我的代码有什么问题？

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

安装间隔：

setInterval((ctx) => { ctx.notification = "111"; },500,this);
setInterval((ctx) => { ctx.notification = "222"; },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>

解决方法

要缓存 <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 来编译 template string。否则，将需要 render functions 而不是 template。

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

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

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

demo