【发布时间】：2020-02-03 16:27:01
【问题描述】：
如何在 Nuxt 中修复此错误？ 一个小费将不胜感激，我已经尝试了几个小时。
[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. (repeated 9 times)
value @ vendors.app.js:12923
value @ vendors.app.js:12923
value @ vendors.app.js:12923
(anonymous) @ vendors.app.js:12923
(anonymous) @ commons.app.js:20499
setTimeout (async)
(anonymous) @ commons.app.js:20482
./node_modules/vue/dist/vue.runtime.esm.js @ commons.app.js:20512
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
(anonymous) @ app.js:2069
./.nuxt/client.js @ app.js:3157
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
0 @ app.js:19627
__webpack_require__ @ runtime.js:791
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
vendors.app.js:12923 info You are running Vue in development mode.
当我从 AsyncData() 调用它时会发生这种情况：
context.store.dispatch('retrievePosts', {'feedUrl': '/' + process.env.backendPublicApiPrefix + '/posts', 'selection': 'feed'} );
在我的 Vuex 商店中：
export const actions = {
async retrievePosts(context, { feedUrl, selection }) {
context.commit("setLoading");
context.commit("incrementPage");
try {
// only make an ajax call if we are not on or past the last page of posts
if (!context.state.lastPage || (context.state.lastPage && (context.state.page <= context.state.lastPage))) {
let finalUrl = feedUrl + '?page=' + context.state.page;
finalUrl += '&viewBy=' + 'feed';
const { data, status } = await this.$axios.get(finalUrl);
if (!data) {
throw ({ statusCode: 404, message: 'Something went wrong while retrieving the post feed. The link you clicked on may be broken or no longer exist.' });
} else {
if (data.last_page) {
context.commit("setLastPage", data.last_page);
}
if (data.data && (data.data.length > 0)) {
context.commit("appendPosts", data.data);
} else {
if (state.page < 1) {
// context.state.error = "response.data.Error";
}
}
}
}
} catch (e) {
throw ({ statusCode: 404, message: 'Something went wrong while retrieving the post feed. The link you clicked on may be broken or no longer exist.' });
}
context.commit("unsetLoading");
},
};
export const mutations = {
setLoading(state) {
state.loading = true;
},
unsetLoading(state) {
state.loading = false;
},
setLastPage(state, pageId) {
state.lastPage = pageId;
},
resetPostFeed(state) {
console.log('resetPostFeed');
state.posts = [];
state.page = 0;
state.lastPage = null;
},
setPostFeed(state, { postFeedSettings, posts }) {
state.posts = posts;
},
setPage(state, pageId) {
state.page = pageId;
},
incrementPage(state) {
state.page++;
},
appendPosts(state, newPosts) {
state.posts = state.posts.concat(newPosts);
},
};
在我的模板中：
<div v-for="post in postsFromStore">
<news-feed-content-card
:postObj="post"
:authorObj="post.user"
/>
</div>
请注意，如果我不从 asyncData() 调用它，那么一切都可以正常工作，但我需要为 SSR 这样做：
context.store.dispatch('retrievePosts', {'feedUrl': '/' + process.env.backendPublicApiPrefix + '/posts', 'selection': 'feed'} );
我该如何解决这个问题？我觉得我在这里缺少一些东西，但我不能完全指出它。
编辑：
no-ssr 标签已被弃用，并被替换为
我把它缩小到这个：
<!-- this causes an error: The client-side rendered virtual DOM tree is not matching server-rendered content. -->
<client-only>
<p class="tw-text-xs tw-pt-1 tw-text-gray-600" v-html="authorObj.bioHeadline"></p>
</client-only>
authorObj.bioHeadline 的 html 类似：Founder at <a href='https://www.example.com' target='_blank'>Domain</a>
我想将它包含在 SSR 模式中（删除仅限客户端的标签），但它会导致该错误：
[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. (repeated 9 times)
【问题讨论】：
-
@emirowski 我尝试了链接问题中建议的步骤，但这并不能解决问题。警告是相同的，但这是一个不同的问题。 AFAIK Nuxt 可能出于多种原因引发此错误。
-
编辑：将问题缩小到 v-html。仍然不确定为什么会这样。
-
我无法重现这个。请包括重现此内容所需的最小示例。您可能已经知道一个不相关的提示：加载商店数据时使用
fetch而不是asyncData。两者功能相同，除了asyncData期望您返回一个将与组件data属性合并的对象 -
@HMilbradt 刚刚发布了我是如何解决这个问题的
标签： vue.js vuejs2 vuex nuxt.js