Article From:https://segmentfault.com/q/1010000012152587
Question:

ulThe data has been cycled out, but when the parameter (function liebiao (text)) requests the background data successfully again, the UL list will not change.
HTML:

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

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

Backstage returns:

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

Answer 0:

It seems to know what’s going on. Every time you screen, you will recreate the Vue instance. Can you just create it once?
The reason is this:
Your HTML begins to be like this

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

The first rendering is completed

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

At this time, all Vue related instructions are gone. When you create Vue instances, it doesn’t know what you want to do, so it will fail.

https://jsfiddle.net/3gswmLta/

Answer 1:

items It should be an array.

data: {
    items: []
},

Answer 2:

che.items??
this.items

Leave a Reply

Your email address will not be published. Required fields are marked *