vue中更改数组中属性,在页面中不生效的解决方法

问题描述：

使用vue的方法获取了数组数据，获取数据后为每个数据增加edit属性，初始值均为false，其目的是为了当点击列表中的编辑按钮时，控制保存与不保存的按钮的出现与消失，结果当更改数组中的edit属性后，页面并没有如预期的那样当edit为true时页面显示更改状态，当edit为false时为不更改状态

解决方案：

edit是在通过post方法获取数据后增加到vue的data数据中的属性，一开始我的做法先将接收到的数据赋值到vue的data中，再对vue的data中的数据增加edit属性，这样在改变edit的之后，虽然在js中使用console.log可以看到该值已经发生变化，但页面中的data值并没有发生变化。

正确的做法应该是先为接收到的数据初始化edit属性，再将处理后的数据赋值给vue的data。

代码如下

<tbody>
     <tr v-for="(book,index) in bookList">
      <td>
       <span v-on:click="book.edit=true" v-show=" !book.edit">{{book.orderIndex}}</span> //如果edit属性为false，则该span出现
       <input v-show="book.edit" /> //如果edit属性为true，则该input出现
      </td>
      <td>
       <a v-show="book.edit" v-on:click="book.edit=false" class="btn btn-primary btn-sm"> //如果edit属性为true，出现不保存(x)按钮
        <i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
</a>
       <a v-show="book.edit" v-on:click="save(book)" class="btn btn-primary btn-sm"> //如果edit属性为true，出现保存(√)按钮
        <i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
       </a>
      </td>

     </tr>
    </tbody>

<script>

var politics = new Vue({

el:"#politics",

data:{

bookList:[]

},

methods:{

getBookList: function (offset, limit, CatalogueID, searchKey, resId) {
    this.limit = limit;
    this.offset = offset;
    this.CatalogueID = CatalogueID;
    this.searchKey = searchKey;
    this.resId = resId;
    this.$http.get("/BookAdmin/getBookList?offset=" + this.offset + "&limit=" + this.limit + "&CatalogueID=" + this.CatalogueID + "&searchKey=" + this.searchKey+"&resId="+this.resId)
     .then(function (resp) {
      resp.data.books.forEach(function (o, i) {
       o.edit = false;
      })
      this.bookList = resp.data.books; // 赋值必须写在属性初始化的后面，否则改edit不能使页面属性变化
      this.bookTotalCount = resp.data.totalCount;
      var pageNo = this.offset / this.limit + 1;
      var totalPage = Math.ceil(this.bookTotalCount / this.limit);

      divpager(pageNo, totalPage, this.bookTotalCount, this.CatalogueID, this.searchKey, this.resId);
     })
   }

}

})

</script>

以上这篇vue中更改数组中属性,在页面中不生效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于微信中a链接无法跳转问题

    [问题] 微信页面开发时,各个主页之间的跳转,完全是通过a链接进行的,但是来回跳转几次,再次从其他主页面跳回首页的时候,微信头部出现了跳转加载进度条,但是就是不跳转,也没有任何反应 [范围] 只出现在微信内置浏览器上 [解决方法] 只要在原本跳转的链接后面带上任意一个参数,即: 复制代码 代码如下: <a href="http://www.baidu.com">百度一下</a> 变成 复制代码 代码如下: <a href="http://www.

  • Vue 中 a标签上href无法跳转的解决方式

    问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s

  • vue 动态修改a标签的样式的方法

    vue 动态修改a标签的样式的方法

    公司要做一个类似今日头条的项目,用前后端分离的方式做成HTML5页面,先在微信中运行,领导说想看看效果怎么样.今日头条头部的导航是可以滚动和添加类别的,我们这个项目也是一样.所以在导航这个地方就需要在点击不同分类的同时,样式也是跟着变的,我在网上搜索了一下,发现了下面的代码,简洁清淅,不过具体网址忘记了,先把代码贴出来给大家看一下,想知道网址的可以去网上搜索一下. <!DOCTYPE html> <html lang="en"> <head> <

  • php中判断数组是一维,二维,还是多维的解决方法

    复制代码 代码如下: <?php/** * 返回数组的维度 * @param  [type] $arr [description] * @return [type]      [description] */function arrayLevel($arr){    $al = array(0);    function aL($arr,&$al,$level=0){        if(is_array($arr)){            $level++;            $al

  • vue中更改数组中属性,在页面中不生效的解决方法

    问题描述: 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态 解决方案: edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,

  • vue使用v-if v-show页面闪烁,div闪现的解决方法

    在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

  • angular4中*ngFor不能对返回来的对象进行循环的解决方法

    解决方法:可以循环返回的对象,得到对象里每一个key所对应的值,然后把值放到自己定义的一个数组中. 例如: tipAttr: any = []; $.each(response.ipCustomer.tip, function(key, val) { console.log(val); self.tipAttr.push(val); return self.tipAttr; }); 以上这篇angular4中*ngFor不能对返回来的对象进行循环的解决方法就是小编分享给大家的全部内容了,希望能给

  • Mysql5.7中使用group concat函数数据被截断的问题完美解决方法

    前天在生产环境中遇到一个问题:使用 GROUP_CONCAT 函数select出来的数据被截断了,最长长度不超过1024字节,开始还以为是navicat客户端自身对字段长度做了限制的问题.后面故意重新INSERT了一个字段长度超1024字节的数据,但是navicat能完整展示出来,所以就排除了navicat的问题. 然后想到1024这个熟悉的数字,会不会是C++框架在接收MySQL通过socket传输过来的数据时被处理了呢?于是手工在日志中打印这个字段,发现即使数据长度超过1024字节仍然是可以

  • Android编程中调用Camera时预览画面有旋转问题的解决方法

    本文实例讲述了Android编程中调用Camera时预览画面有旋转问题的解决方法.分享给大家供大家参考,具体如下: 在调用Camera写应用的时候,前后摄像头的情况有时候是不一样的.有时候,明明后摄像头没有问题,而调用到前摄像头时,却倒转了180°,或者其他角度,百思不得其解.在查看了Android源码之后,发现它的解决办法很是好,接下来贴个源码,以备日后查看. public static int getDisplayRotation(Activity activity) { int rotat

  • jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法

    本文实例讲述了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法.分享给大家供大家参考,具体如下: 先看如下代码: /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } /** * 全不选 */ function uncheckAll() { $("input[name=ids]&quo

  • layui中select，radio设置不生效的解决方法

    废话不多说,大家来看吧! <button class="layui-btn layui-btn-radius" layadmin-event="edit"> <i class="layui-icon"></i>编辑</button> 点击编辑取消disabled $(function(){ $("input").attr("disabled",true);

  • IDEA中使用Git拉取代码时报 Git pull failed原因及解决方法

    产生原因: 先说一下Git和SVN的区别吧,有助于更好的理解这个问题. SVN从服务器上update文件时,如果文件有冲突,SVN会自动帮你merge,很方便:GIT如果本地有文件改动未提交,且该文件和服务器最新版本有冲突,pull更新时会提示错误,无法更新. 就是这个小小的区别,造成了产生"Git Pull Failed"错误的根本原因. 解决办法: Git编译器,要么就是先commit自己的改动再pull,要么就是使用Stash Changes后再pull,如下. 1. 当本地改动

  • jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法

    本文实例讲述了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法.分享给大家供大家参考,具体如下: 先看如下代码: /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } /** * 全不选 */ function uncheckAll() { $("input[name=ids]&quo

随机推荐