vue.js ajax 多次异步更改数据导致视图无法更新

Question

ul已经循环取出了数据，但是当带参数（ function liebiao(text)）再次请求后台数据成功时，ul列表不会变化，求解？
HTML：

<div id="che">
  <a class="access" href="javascript:;" v-for="item in items">
    <div class="weui-cell__bd">
      <p>{{ item.chepai }} </p>
    </div>
    <div class="weui-cell__ft"></div>
  </a>
</div>

js：

    function liebiao(text) {
      var che = new Vue({
          el: '#che',
          data: {
            items: []
          },
          mounted:function(){
            var _self=this;
              $.ajax({
                type: "POST",
                url: "fun.php?action=getList",
                dataType: "json",
                data: {
                  text: text
                },
                error: function() {
                    alert("error")
                },
                success: function(data) {
                    _self.items=data;
                }
            })
          }
        })  
     }

后台返回结果：

[
    {
        "0": "WJ-201711070001",
        "1": "11111",
        "ID": "WJ-201711070001",
        "chepai": "11111"
    },
    {
        "0": "WJ-201711080002",
        "1": "22222",
        "ID": "WJ-201711080002",
        "chepai": "22222"
    }
]

Answer 1

好像知道是怎么回事了。你每次筛选的时候都会去重新创建vue实例，能不能只创建一次呢？
原因是这样的：
你的html开始是这样的

<div id="che">
  <a class="access" href="javascript:;" v-for="item in items">
    <div class="weui-cell__bd">
      <p>{{ item.chepai }} </p>
    </div>
    <div class="weui-cell__ft"></div>
  </a>
</div>

第一次渲染完成了

<div id="che">
  <a href="javascript:;" class="access">
    <div class="weui-cell__bd">
      <p>11111 </p>
    </div>
    <div class="weui-cell__ft"></div>
  </a>
  <a href="javascript:;" class="access">
    <div class="weui-cell__bd">
      <p>22222 </p>
    </div>
    <div class="weui-cell__ft"></div>
  </a>
</div>

这个时候所有的vue相关的指令都已经没有了，你再创建vue实例的时候，它并不知道你想干什么，所以才会失效。

https://jsfiddle.net/3gswmLta/

Answer 2

items 应该是个数组吧。

data: {
    items: []
},

Answer 3

che.items??
this.items

Answer 4

兄弟解决了吗我也遇到了，