BUG. v-if and v-else don't work together on a Page update

[o-alexandrov]

Hello, Cart is misfunctioning on an update of the page, showing the following error:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 

What I have:

<div v-if="!buyList.length" class="info">
    <span>Cart is empty</span>
</div>
<div v-else class="list_of_orders">
    <div v-for="i in buyList">
        <i class="fa fa-remove" @click="removeItem(i.id)"></i><span>{{ i.title }} - {{ i.qty }}</span>
    </div>
</div>

data: () => ({
    buyList: []
})

[posva]

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or Github repository containing a set of reproducible steps that can lead to the behaviour you described. Make sure to boil down the problem as much as possible. Thanks!

The issue may be related to the fact that you are using a v-if/v-else as the root of a component and that the array isn't empty when server rendering it. Can you try putting a div around the whole v-if/v-else block?

[o-alexandrov]

@posva Thank you for the reply and apologies for not adding the JSFiddle. There is an example And here is a screenshot of the error from the console:

[posva]

mmh, Are you sure that's the good repro? I was expecting a repo since you have SSR. Also, the repro you shared is using and outdated vue 1 version (only Vue 2 has official SSR support) Please, make sure to read https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#issue-reporting-guidelines so you don't forget any needed information, thanks 🙂

[o-alexandrov]

@posva oh, yeah, my bad with a vue version in JSFiddle. I was adding it in a hurry. Of course, I have Vue 2 in the project.

The project is using nuxt.

I think the problem is with the localstorage and the difference between the backend and frontend apps. What I will do is to have a message at first and then removing it using a function when adding an item to the cart.

[posva]

It's ok if there's nuxt in it, make sure to boil down the issue, though