<!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页面渲染问题的更多相关文章

  1. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  2. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

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

    1.vue中数据接收成功,页面渲染失败.代码如下 经过查找资料修改代码为 或是 原因是: 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:  ...

  4. Vue数据产生变化需要页面渲染完之后执行某操作

    1.数据产生变化或者页面需要vue数据渲染完之后加载的东西 Vue.nextTick(function () { alert(123); }); 2 调用vue方法 --------------Vue ...

  5. vue再页面渲染json数据时没有显示

    对象点属性不能获取数据. 原因: 在创建数据对象时我使用了k,v方式:tempMap['category '] = this.category[i].label 如果在创建数据时使用的k,v方式,那么 ...

  6. python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  7. Web开发中，页面渲染方案

    转载自:http://www.jianshu.com/p/d1d29e97f6b8 (在该文章中看到一段感兴趣的文字,转载过来) 在Web开发中,有两种主流的页面渲染方案: 服务器端渲染,通过页面渲染 ...

  8. Vue页面骨架屏(二)

    实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...

  9. Vue页面骨架屏（一）

    在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...

随机推荐

  1. IntellijIDEA常用快捷键总结

    转载自:http://blog.csdn.net/qq_17586821/article/details/52554731 下面的这些常用快捷键需要在实际操作中不断地体会才能真正感受到它们的方便之处. ...

  2. GP中Geoprocessor.Execute(string name, IVariantArray parameters, ITrackCancel trackCancel)

    在做一个项目的过程中,发现GP运算方法 Execute(string name, IVariantArray parameters, ITrackCancel trackCancel) 与Execut ...

  3. 使用LFSR搭建误差补偿系统

    使用LFSR搭建误差补偿系统 首先弄明白什么是LFSR 线性反馈移位寄存器(LFSR)是内测试电路中最基本的标准模块结构,既用作伪随机测试码产生器,也作为压缩测试结果数据的特征分析器. 一个n阶的LF ...

  4. 【Leecode】两数之和

    学习使用标准模板库(STL)中的map,hash_map.涉及数据结构知识:哈希表,红黑树. map的使用方法 https://www.cnblogs.com/fnlingnzb-learner/p/ ...

  5. pecl 更换对应php版本

    转自  https://www.jianshu.com/p/fee58d93e8b1 版本问题 如果我们是通过apt-get或者yum安装的php,现在一般默认的都是php7.0版本. pecl安装过 ...

  6. Web高级 HTTP报文

    1. 报文结构 1.1 请求报文结构 Start-Line 单行,包括 Method + URL + HTTP Version Headers 多行,形式为 Name:Value Body 可选,主体 ...

  7. 使用 AWK 去掉文本文档中的空白行

    在 Linux 操作系统中,可以使用 AWK 命令高效地处理文本文档.AWK 命令通过执行使用 AWK 语言编写的脚本程序,处理文本文档.AWK 脚本程序是由模式(patterns)与相关操作(cor ...

  8. Solr使用访问地址控制索引的，删除、创建

    启动Solr,删除全部索引数据: http://localhost:8080/solr/update/?stream.body=<delete><query>*:*</q ...

  9. kettle无法更新数据库字段解决办法

    刚开始使用kettle,遇到一个问题, 在编写一个转换流程时,如果所操作的表字段名发生了变化(例如表student中id变更问userid),但是在kettle中使用时仍然显示是id,如下图, 此时清 ...

  10. subprocess模块 sys模块

    常用模块学习—subprocess模块详解 要通过Python去执行一条系统命令或脚本,系统的shell命令是独立于你的python进程之外的,每执行一条命令,就是发起一个新进程,通过python调用 ...