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]

这是我的组成部分此代码是导致错误的示例。

<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

我当时正在处理同样的问题。

执行以下步骤：

运行您的项目（yarn start）。
在Chrome中打开http://localhost:3000/。
在Chrome devtools中，在“应用程序”标签中清除站点数据。
强制重新加载页面。

尝试获取窗口大小时，Nuxt无法在“节点”上执行“ appendChild”

2 个答案: