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

Question

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

我的代码有什么问题？

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>and的渲染<datalist>（将它们与组件模板中不相关的更改隔离开来），请将它们放入组件中：

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>`
})

请注意，此示例需要运行时编译器来编译template字符串。否则，将需要render函数template而不是.

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

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

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

演示