weex - 反复执行出错:Cannot read property 'getBoundingClientRect' of undefined

问题描述

问 题

在Weex使用下面的vue文件，前两次点击Shuffle正常，但第三次开始出错无法正常执行。相同的例子在Vue.js是正常，示例在: https://jsfiddle.net/chrisvfr...

错误信息为:

vue.runtime.js:436 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'getBoundingClientRect' of undefined"

代码如下:

<template>
    <div class="wrapper">
        <h1>Lazy Sudoku</h1>
        <p>Keep hitting the shuffle button until you win.</p>

        <button @click="shuffle">
            Shuffle
        </button>
        <transition-group name="cell" tag="div" ref="container" class="container">
            <div v-for="cell in cells" :key="cell.id" class="cell">
                <p>{{ cell.number }}</p>
            </div>
        </transition-group>
    </div>
</template>

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        width: 238px;
        margin-top: 10px;
    }

    .cell {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 25px;
        height: 25px;
        border: 1px solid #aaa;
        margin-right: -1px;
        margin-bottom: -1px;
    }

    .cell:nth-child(3n) {
        margin-right: 0;
    }

    .cell:nth-child(27n) {
        margin-bottom: 0;
    }

    .cell-move {
        transition: transform 1s;
    }
</style>

<script>
    // Import lodash from https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js
    var lodash = require('./lodash.min.js');

    export default {
        data: {
            cells: Array.apply(null, {length: 81})
                .map(function (lodash, index) {
                    return {
                        id: index,
                        number: index % 9 + 1
                    }
                })
        },
        methods: {
            shuffle: function () {
                this.cells = lodash.shuffle(this.cells)
            }
        },
        mounted: function() {
            this.$refs.container.$el.className = 'container';
        }
    }
</script>

而且在Vue.js中并不需要对cell包在<p>标签内，在Weex中如果不使用p标签就无法显示文字。

解决方案

应该是Weex仍不支持<transition-group>。在更新节点时，VNode与DOM node之前的绑定被解除了，导致再次使用时为undefined了。
具体不支持的内容，可以参考:
Differences between using Vue in Web and Weex

这篇关于weex - 反复执行出错:Cannot read property &#039;getBoundingClientRect&#039; of undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！