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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

慕桂英546537 2023-11-02 22:39:50
我在 Nuxt.js 中收到以下錯誤:[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>我正在關注這里的示例: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>因為我還收到有關服務器和客戶端不匹配的錯誤。如果沒有它,我會收到一個額外的錯誤:[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貢獻1869條經驗 獲得超4個贊

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

由于您的應用程序在運行時需要字符串模板,因此您需要配置 Nuxt 以使用包含編譯器的 Vue 構建:

// nuxt.config.js

export default {

? build: {

? ? extend(config) {

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

? ? }

? },

}


查看完整回答
反對 回復 2023-11-02
?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

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

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

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

  • 單擊按鈕時,組件本身會向父組件發(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>


查看完整回答
反對 回復 2023-11-02
  • 2 回答
  • 0 關注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號