第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Nuxt.js 動(dòng)態(tài)組件錯(cuò)誤“要么將模板預(yù)編譯為渲染函數(shù),要么使用編譯器包含的構(gòu)建”

Nuxt.js 動(dòng)態(tài)組件錯(cuò)誤“要么將模板預(yù)編譯為渲染函數(shù),要么使用編譯器包含的構(gòu)建”

慕桂英546537 2023-11-02 22:39:50
我在 Nuxt.js 中收到以下錯(cuò)誤:[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.found in---> <Anonymous>       <RenderPost> at components/RenderPost.vue         <Pages/post/Id.vue> at pages/post/_id.vue           <Nuxt>             <Layouts/default.vue> at layouts/default.vue               <Root>我正在關(guān)注這里的示例:https://stackoverflow.com/a/39519105,我的RenderPost.vue大致如下所示:<template>    <client-only>        <component :is="dynamicComponent" />    </client-only></template><script>export default {    methods:    {        linkedView()        {            return `<a href="#" @click.prevent="runSomething">Click me</a>`;        },    },    computed :    {        dynamicComponent() {            return {                data() { return { foo : null }},                template : `<div>${this.linkedView()}<br>{{ foo }}</div>`,                methods :                {                    runSomething()                    {                        this.foo = 'ran something!'                    }                }            }        }    }}</script>我添加了<client-only>因?yàn)槲疫€收到有關(guān)服務(wù)器和客戶端不匹配的錯(cuò)誤。如果沒(méi)有它,我會(huì)收到一個(gè)額外的錯(cuò)誤:[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.
查看完整描述

2 回答

?
MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊

Nuxt 通常僅包含 Vue 運(yùn)行時(shí)(不包括編譯器)作為優(yōu)化,可將構(gòu)建大小減少約 10KB,因?yàn)榇蠖鄶?shù)用戶使用預(yù)編譯模板(例如,通過(guò)單個(gè)文件組件)。Vue 僅運(yùn)行時(shí)構(gòu)建會(huì)在運(yùn)行時(shí)使用 in-DOM 或字符串模板時(shí)發(fā)出您觀察到的警告。

由于您的應(yīng)用程序在運(yùn)行時(shí)需要字符串模板,因此您需要配置 Nuxt 以使用包含編譯器的 Vue 構(gòu)建:

// nuxt.config.js

export default {

? build: {

? ? extend(config) {

? ? ? config.resolve.alias.vue = 'vue/dist/vue.common'

? ? }

? },

}


查看完整回答
反對(duì) 回復(fù) 2023-11-02
?
白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊

下面的代碼片段展示了如何<component :is="dynamicComponent"></component>工作。

  • 2 個(gè)組件注冊(cè)到Vue(全局)

  • 單擊按鈕后,:is綁定將更新為已注冊(cè)的組件名稱之一

  • 單擊按鈕時(shí),組件本身會(huì)向父組件發(fā)出事件

Vue.component('Comp1', {

  template: `

    <div>

      COMPONENT 1<br />

      <button

        @click="() => $emit('clicked', 1)"

      >

        Click 1

      </button>

    </div>

  `

})


Vue.component('Comp2', {

  template: `

    <div>

      COMPONENT 2<br />

      <button

        @click="() => $emit('clicked', 2)"

      >

        Click 2

      </button>

    </div>

  `

})


new Vue({

  el: "#app",

  data() {

    return {

      dynamicComponent: 'Comp1'

    }

  },

  methods: {

    toggleComponent() {

      if (this.dynamicComponent === 'Comp1') {

        this.dynamicComponent = 'Comp2'

      } else {

        this.dynamicComponent = 'Comp1'

      }

    },

    handleClicked(id) {

      console.log('click in comp', id)

    }

  },

  template: `

    <div>

      <button

        @click="toggleComponent"

      >

        SWITCH COMPONENT

      </button>

      <br />

      <component

        :is="dynamicComponent"

        @clicked="(id) => handleClicked(id)"

      ></component>

    </div>

  `

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>


查看完整回答
反對(duì) 回復(fù) 2023-11-02
  • 2 回答
  • 0 關(guān)注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)