VUE页面渲染问题

Posted lidezhen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE页面渲染问题相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
  <script src="./vue.min.js"></script>
  <script src="./vue-resource.min.js"></script>
</head>

<body>
  <div id="app">
    <span v-text=‘message‘></span>
    <br/>
    {{CreationDate}}</div>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: ‘111‘,
        CreationDate: ‘222‘
      },
      mounted: function () {
        this.init();
        
      },
     
      methods: {
        init: function () {
          var searchStr = location.search;
          searchStr = searchStr.substr(1);
          var searchs = searchStr.split("&");
          var factory = searchs[0].split("=");
          var id = searchs[1].split("=");
          Vue.http.post(‘http://192.168.224.133:8000/api/NonconformanceReportApi/GetViewData?factory=‘ + factory[
            1], {
            Name: id[1]
          }).then(function (data) {
            if (data.ok) {
             

              this.message = data.data;
              
              this.CreationDate = data.data.CreationDate;
              app.$forceUpdate(); 

            }

          })
        }
      }

    });
    // $(document).ready(function () {
    //   var searchStr = location.search;
    //   searchStr = searchStr.substr(1);
    //   var searchs = searchStr.split("&");
    //   var factory = searchs[0].split("=");
    //   var id = searchs[1].split("=");
    //   $(‘#div1‘).load(‘http://192.168.224.133:8000/api/EmailGroupApi/GetEmailGroups?factory=p2‘);
    //   $("button").click(function () {

    //     $.ajax({
    //       type: ‘post‘,
    //       url: ‘http://192.168.224.133:8000/api/NonconformanceReportApi/GetViewData?factory=‘ + factory[1],
    //       data: {
    //         name: id[1]
    //       },
    //       success: function (data) {
    //         alert(data);
    //         $(‘#div1‘).html(data.FpNcrName)
    //       }
    //     });
    //   });
    // });
  </script>
</body>

</html>

页面数据已经更改 ，但是没有重新渲染，有大神知道什么原因吗，在线等，十分感谢

以上是关于VUE页面渲染问题的主要内容，如果未能解决你的问题，请参考以下文章

vue中的组件

Spring boot：thymeleaf 没有正确渲染片段

Vue数据类型导致的页面渲染问题

thymeleaf 片段渲染后重新加载 javascript

vue前端异步与页面渲染问题：怎样让子异步函数完成后页面再渲染

vue中数据接收成功，页面渲染失败