vue数据重新加载但是页面没有重新渲染？

如图，添加会员后重新执行了查询的接口，但是数据没有重新渲染，接口返回的数据是对的，必须刷新页面就好了，求救

if(flag){
    $("#num").text(data.bean.total);
    var selectNb = new Vue({
        el:'#memberList',
        data:data,
        computed:{
            time:function(){
                var times = this.beans[0].memberCreateTime;
                return times.substring(0,times.length-2);
            }
         }
});

<template v-for="item in beans">
            <tr class="text-c">
                <td><input type="checkbox" :value="item.memberId" name="mbChecked"></td>
                <td><u style="cursor:pointer" class="text-primary" onclick="member_show($(this),'用户信息','member-show.html')">{{item.memberName}}</u></td>
                <td>{{item.gender}}</td>
                <td>{{item.phoneNum}}</td>
                <td>{{item.mail}}</td>
                <td class="text-l">{{item.address}}</td>
                <td>{{time}}</td>
                <td class="td-status">
                    <span class="label label-success radius" v-if="item.memberStatus == '0'">已启用</span>
                    <span class="label label-defaunt radius" v-else>已停用</span>
                </td>
                <td class="td-manage">
                    <a v-if="item.memberStatus == '0'" :id='item.memberId' style="text-decoration:none" onclick="member_stop($(this))" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a> 
                    <a v-else :id='item.memberId' style="text-decoration:none" onclick="member_start($(this))" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>

                    <a title="编辑" href="javascript:;" onclick="member_edit($(this),'编辑','member-add.html')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> 

                    <a style="text-decoration:none" class="ml-5" onClick="change_password('修改密码','change-password.html')" href="javascript:;" title="修改密码"><i class="Hui-iconfont">&#xe63f;</i></a>

                    <a title="删除" href="javascript:;" onclick="member_del($(this))" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
                </td>
            </tr>
            </template>

beans

vue.js vuex javascript

阅读 26.4k

4 个回答

因为数据更新是同步的，但是DOM的更新是异步的，建议加一个this.$nextTick(this.isShow = true)，DOM中：v-show="isShow",通过控制isShow，确保DOM的异步更新已经完成。
~~另外，数组直接赋值会导致拦截双绑出现问题，建议使用数组的方法，这样数组才能动态更新。~~
假如data中有一个数组类型的变量demoArr，如果是this.demoArr = newArr，这种是可以被Vue监听到变化的，但是假如是this.demoArr[0] = obj或者 this.demoArr[0].aaa = 1，这种是不会被Vue监听到的，建议使用数组方法进行修改。