javascript - vue2中的Render函数中如何实现数据绑定？

问题描述

问 题

如下代码中，当matrix发生变化时，实际Dom中的value值并不会变化，如何才能做到像模板一样能绑定呢？

export default {
    data: function () {
      return {
        matrix: [0, 1, 2, 3]
      }
    },
    
    render: function(createElement) {
        return createElement('div',
            this.matrix.map((value, index)=>createElement('p', value)) 
        )
    }
}

解决方案

是不是你修改matrix的方式不是响应式的啊？
修改数组的响应式方式官网上列了这些：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

你代码不用变，加上这段看看结果？

mounted(){
    setTimeout(()=>this.matrix.push(4), 1000);
    setTimeout(()=>this.matrix.splice(2,1,10,11,12,14), 2000);
    setTimeout(()=>this.matrix=[0], 3000);
}

我本地是好的

这篇关于javascript - vue2中的Render函数中如何实现数据绑定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！