如何使用保存在 Nuxt 商店中的 Vuetify select 值修复不匹配的子节点？

Question

我正在将 Vuetify v-select 值保存到 Nuxt 商店。它有效，但每次我刷新我的页面时，我都会在控制台中收到不匹配的 childNodes 错误。

一种修复方法，将 test 设置为 select 的任何值，但我需要它在第一次使用时等于 null。

我该如何解决？

components/Test.vue

<template>
  <div>
    value: {{ $store.state.test }}
    <v-select
      label="Test"
      :value="$store.state.test"
      :items="testItems"
      @change="updateTest($event)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      testItems: [
        { text: 'Foo', value: 'F' },
        { text: 'Bar', value: 'B' },
      ],
    }
  },
  methods: {
    async updateTest(e) {
      await this.$store.dispatch('commitTest', e)
    },
  },
}
</script>

store/index.js

export const state = () => ({
  test: null,
})

export const mutations = {
  TEST_UPDATE(state, payload) {
    state.test = payload
  },
}

export const actions = {
  async commitTest({ commit }, payload) {
    commit('TEST_UPDATE', payload)
  },
}

Answer 1

出现这种情况是因为SSR含量不等于水化后的含量。您可以单击错误以查看这是从哪里来的，但这可能是因为 $store.state.test.

的值

您可以将它们设置在 created 挂钩中而不是直接设置，或者您可以将来自 Vuex 的内容包装到 <client-only>...</client-only> 标记中。这样，它就不会在服务器上生成，而只会在客户端渲染时生成。

有关这篇精彩文章的更多信息：https://blog.lichter.io/posts/vue-hydration-error/

如何使用保存在 Nuxt 商店中的 Vuetify select 值修复不匹配的子节点？

How to fix mismatching childNodes with Vuetify select value saved in Nuxt store?

vuex

nuxt.js

vuetify.js