Question

我在Vue.js中有一个模板，如下所示：

<div class="filter">
    <div class="checkbox" v-for="(value, index) in range" :key="index">
        <span class="hotels">{{ count(index) }}</span>
    </div><!-- /.checkbox -->
</div><<!-- /.filter -->

此处count方法非常重要。它触发两次，似乎也是第二次触发和重新渲染的原因。

这是我的方法：

count(value) {
    console.log('count');

    // Get the filtered AJAX data.
    let hotels = this.allHotels;

    const filters = Object.entries(this.filters);

    for (let i = 0; i < filters.length; i += 1) {
        // Get the Object from the array(index 0 being the name).
        const filter = filters[i][1];

        // Break the v-model reference by creating a shallow copy.
        const values = filter.values.slice(0);

        // Merge any selected checkbox values with the one we are currently iterating.
        if (!values.includes(value)) values.push(Number(value));

        // Check if the current filter has selected checkboxes and filter if it does.
        hotels = filter.function(hotels, values);
    }

    return hotels.length;
}

除了console.log()之外的其他任何东西都能正常工作。每当我离开代码的其余部分时，整个模板似乎都会重新触发。这看起来很奇怪，因为我将模板中的数据和模板单独依赖的计算属性保留下来。

有没有办法调试导致第二次重新渲染的内容？

整个组件：

https://gist.github.com/stephan-v/a5fd0b6bae854276666536da445bbf86

修改

我的组件count函数在其中有一个名为allHotels的计算属性。此属性被设置为道具。

在第一个console.log它似乎是空的然后立即它将被设置导致重新渲染。我希望因为这个道具来自后端，所以它会把它作为初始值，但事实并非如此。

有什么可以克服这个并阻止重新渲染吗？如果Vue立即将后端的道具数据作为初始数据，则无需重新渲染。

希望很清楚我的意思。

复制

不知怎的，我似乎无法复制这个，我希望这也能像我的代码一样工作，并在第一次使用console.log时显示一个空标题：

https://jsfiddle.net/cckLd9te/123/

也许是因为我传递给我的组件的道具数据是一个非常大的json_encoded块，Vue.js需要时间来解释数据？

Vue.js阻止重新渲染？

0 个答案: