页面中for循环没有生效是什么原因

Question

为什么页面循环没有生效

<div id="pay_finish" v-cloak>
        <div class="body_down">
            <div class="pay_info_ybtx">
                <ul class="pay_fail" id="pay_fail_ybtx">
                    <div>hahahah</div>
                    <li v-for="(item,key) in listt" :key="item.seq_no">
                        <p>被保险人：<span>{{item.insured_name}}</span></p>
                    </li>
                </ul>
</div></div></div>

var payFinishVM = new Vue({
    el: '#pay_finish',
    data: {
        listt: [],
    },
    computed: {
    },
    mounted: function () {
        $('#loadingToast').show();
        this.loading_query();
    },

    methods: {
        loading_query() {
            var data = {
                "seed_no": hxcjs.getValue(hxcjs.getUrlString("seed_no")),
                "openid": hxcjs.getValue(hxcjs.getUrlString("openid_gv"))
            };
            $.ajax({
                url: vcommonurl + "v1/family/result/query",
                data: JSON.stringify(data),
                type: 'POST',
                timeout: 30000,
                dataType: 'json',
                contentType: "application/json",
                success: function (data) {
                    $('#loadingToast').hide();
                    this.listt = data.family
                    console.log('this.listt',this.listt)
                },
                complete: function (XMLHttpRequest, status) {
                    if (status == 'timeout') {
                        $("#errInfo").show();
                        $('#loadingToast').hide();
                    }
                }
            });
        },
        errInfo: function () {
            $(".del_mask").hide();
        }
    }
});

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题描述：为什么页面循环没有生效？ 解决方案：可以从代码、数据、页面三个方面入手，分别检查以下几点：

1. 代码方面：Vue实例是否正确创建，data属性和computed属性是否设置正确，methods方法是否被正确调用等；
2. 数据方面：检查从后台获取的数据是否正确，在mounted生命周期函数中是否正确调用loading_query方法，获取到的数据是否正确赋值给了listt属性；
3. 页面方面：检查是否正确使用了v-for指令，key属性是否正确设置，是否存在其他因素影响了页面循环等。 以下是解决方案的示例代码：

<!-- 页面代码 -->
<div id="pay_finish" v-cloak>
  <div class="body_down">
    <div class="pay_info_ybtx">
      <ul class="pay_fail" id="pay_fail_ybtx">
        <div>hahahah</div>
        <li v-for="(item,key) in listt" :key="item.seq_no">
          <p>被保险人：<span>{{item.insured_name}}</span></p>
        </li>
      </ul>
    </div>
  </div>
</div>
<script>
// Vue实例
var payFinishVM = new Vue({
  el: '#pay_finish',
  data: {
    listt: [], // 记得要设初值为空数组
  },
  computed: {
    // 计算属性
  },
  mounted: function () {
    $('#loadingToast').show();
    this.loading_query();
  },
  methods: {
    loading_query() {
      var data = {
        "seed_no": hxcjs.getValue(hxcjs.getUrlString("seed_no")),
        "openid": hxcjs.getValue(hxcjs.getUrlString("openid_gv"))
      };
      var that = this; // 因为ajax中success里的this指向不是Vue实例，所以保存一下this
      $.ajax({
        url: vcommonurl + "v1/family/result/query",
        data: JSON.stringify(data),
        type: 'POST',
        timeout: 30000,
        dataType: 'json',
        contentType: "application/json",
        success: function (data) {
          $('#loadingToast').hide();
          that.listt = data.family; // 注意要用that.listt，而不是this.listt
          console.log('this.listt',that.listt)
        },
        complete: function (XMLHttpRequest, status) {
          if (status === 'timeout') {
            $("#errInfo").show();
            $('#loadingToast').hide();
          }
        }
      });
    },
    errInfo: function () {
      $(".del_mask").hide();
    }
  }
});
</script>