鍍金池/ 問(wèn)答/HTML/ vue.js ajax 多次異步更改數(shù)據(jù)導(dǎo)致視圖無(wú)法更新

vue.js ajax 多次異步更改數(shù)據(jù)導(dǎo)致視圖無(wú)法更新

ul已經(jīng)循環(huán)取出了數(shù)據(jù),但是當(dāng)帶參數(shù)( function liebiao(text))再次請(qǐng)求后臺(tái)數(shù)據(jù)成功時(shí),ul列表不會(huì)變化,求解?
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;
                }
            })
          }
        })  
     }

后臺(tái)返回結(jié)果:

[
    {
        "0": "WJ-201711070001",
        "1": "11111",
        "ID": "WJ-201711070001",
        "chepai": "11111"
    },
    {
        "0": "WJ-201711080002",
        "1": "22222",
        "ID": "WJ-201711080002",
        "chepai": "22222"
    }
]
回答
編輯回答
不將就

che.items??
this.items

2018年2月10日 05:31
編輯回答
青檸

items 應(yīng)該是個(gè)數(shù)組吧。

data: {
    items: []
},
2017年6月1日 20:37
編輯回答
青瓷

兄弟解決了嗎我也遇到了,

2018年9月12日 00:31
編輯回答
汐顏

好像知道是怎么回事了。你每次篩選的時(shí)候都會(huì)去重新創(chuàng)建vue實(shí)例,能不能只創(chuàng)建一次呢?
原因是這樣的:
你的html開(kāi)始是這樣的

<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>

這個(gè)時(shí)候所有的vue相關(guān)的指令都已經(jīng)沒(méi)有了,你再創(chuàng)建vue實(shí)例的時(shí)候,它并不知道你想干什么,所以才會(huì)失效。

https://jsfiddle.net/3gswmLta/

2017年11月1日 20:44