当尝试获取窗口大小时，Nuxt无法在‘Node’上执行‘appendChild’

Question

问题是，项目必须转移到Nuxt，并且一些代码不能工作。也就是说，屏幕的大小必须对文本执行操作。因为Nuxt是一个SSR，所以代码不能在服务器端执行，因为它不知道窗口的大小。

我能以某种方式实现这个想法，这样一切都能正常工作吗？我和nuxt和i18n有个项目

[nuxt] Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.Je [as appendChild] 

这个我的组件vue这个代码是导致错误的一个例子。

<template>
    <section>
        <div>           
            <h2 class="subtitle" v-html="filterHeadSlogan"></h2>            
        </div>
    </section>
</template>
<script>
  export default {
    name: 'testapp',
    data() {
      return {
        filterHeadSlogan: '',
        windowWidth: 0
      }
    },
    methods: {
      getWindowWidth(event) {
        this.windowWidth = document.documentElement.clientWidth
        var str = "<i>HELLO WORLD</i>"
        if (this.windowWidth >= 960) {
          this.filterHeadSlogan = str
        } else {
          this.filterHeadSlogan = str.replace(/<\/?[^>]+(>|$)/g, '')
        }
      }
    },
    mounted() {
      this.$nextTick(function () {
        window.addEventListener('resize', this.getWindowWidth);
        //Init
        this.getWindowWidth()
      })
    }

  }
</script>

Answer 1

由于变量中没有数据，因此发生错误。这个村庄出现了，但没有数据，而且发生了冲突。我创建了asyncData

  async asyncData(){
        return {
          headSlogan: ""
        }
      },

完整代码

<template>
    <div class="westartslogan">
        <div class="head-slogan">
            <h2 v-html="headSlogan"></h2>
        </div>
        <h3>{{$t('page.home.wellcom_block_subtitle_left')}}</h3>
        <ul>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_1_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_2_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_3_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_4_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_5_left')"></div></li>
        </ul>

        <div class="startcalc-btn button-container">
            <nuxt-link   :to="getLocalizedRoute({ name: 'calculator' })"  class="uk-button uk-button-default">{{
                $t('page.home.wellcom_button_calculator') }}
            </nuxt-link >
        </div>
        <div class="ourproject-btn uk-hidden@s">
            <div class="button-container">
                <nuxt-link :to="getLocalizedRoute({ name: 'portfolio' })" class="uk-button uk-button-default">
                   {{ $t('page.home.wellcom_button_portfolio') }}
                </nuxt-link>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
      async asyncData(){
        return {
          headSlogan: ""
        }
      },
      name: 'we_can',
      data () {
        return {
          filterHeadSlogan: '',
          headSlogan:  this.$i18n.t('page.home.wellcom_block_title_left'),
          windowWidth: 0
        }
      },
     methods: {
       getWindowWidth (event) {
         this.windowWidth = document.documentElement.clientWidth
         if (this.windowWidth >= 960) {
           this.headSlogan = this.headSlogan
         } else {
           var str = this.headSlogan
           this.headSlogan = str.replace(/<\/?[^>]+(>|$)/g, '')
         }
       }
     },
    mounted() {
      this.$nextTick(function () {
        window.addEventListener('resize', this.getWindowWidth);
          //Init
          this.getWindowWidth()
      })
    }

  }
</script>

<style scoped>

</style>

Answer 2

我也在处理同样的问题。

执行以下步骤：

1. 在Chrome中运行项目(yarn start).
2. Open http://localhost:3000/。Chrome devtools中的
3. 清除应用程序选项卡中的站点数据。
4. 硬重新加载页面。