Ralat Vue: Tidak dapat menggunakan v-html dengan betul untuk memaparkan kod HTML dinamik, bagaimana untuk menyelesaikannya?

Ralat Vue: Tidak dapat menggunakan v-html dengan betul untuk memaparkan kod HTML dinamik, bagaimana untuk menyelesaikannya?

Pengenalan:
Dalam pembangunan Vue, kami biasanya menggunakan arahan v-html untuk menghasilkan kod HTML dinamik. Walau bagaimanapun, kadangkala kita mungkin menghadapi masalah, iaitu, kita tidak boleh menggunakan v-html dengan betul untuk menghasilkan kod HTML dinamik. Artikel ini menerangkan punca masalah ini dan cara membetulkannya.

Penerangan masalah:
Apabila kami menggunakan arahan v-html untuk memaparkan kod HTML dinamik, kadangkala kami menghadapi mesej ralat berikut:

"Ralat: tidak boleh menggunakan v-html untuk memaparkan kod HTML dinamik"

Ralat ini adalah umum Apa yang berlaku ialah apabila kami menggunakan Vue.js, kami mahu menjadikan rentetan HTML ke dalam DOM sebagai kandungan dinamik. Walau bagaimanapun, atas sebab keselamatan, Vue melarang menggunakan v-html untuk memaparkan kod HTML dinamik secara lalai.

Penyelesaian:
Untuk menyelesaikan masalah ini, kami perlu mengambil beberapa langkah untuk memintas tetapan lalai Vue. Berikut ialah dua penyelesaian biasa:

Kaedah 1: Gunakan mekanisme slot Vue
Mekanisme slot Vue boleh membantu kami memintas tetapan keselamatan lalai. Kita boleh membuat slot dalam komponen dan memasukkan kod HTML dinamik ke dalam slot. Dengan cara ini anda boleh memintas sekatan keselamatan Vue. Berikut ialah kod sampel:

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'HtmlRender',
  props: {
    htmlCode: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.$el.innerHTML = this.htmlCode;
  }
}
</script>

Dalam sampel kod ini, kami mencipta komponen yang dipanggil HtmlRender yang menerima sifat yang dipanggil htmlCode. Dalam fungsi cangkuk komponen yang dipasang, kami menetapkan kod HTML dinamik kepada elemen akar komponen untuk pemaparan.

Apabila menggunakan komponen ini, anda boleh menghantar kod HTML dinamik ke komponen HtmlRender dalam bentuk props, dan kemudian menjadikannya dalam slot:

<template>
  <div>
    <html-render :htmlCode="dynamicHTML"></html-render>
  </div>
</template>

<script>
import HtmlRender from './HtmlRender.vue';

export default {
  components: {
    HtmlRender
  },
  data() {
    return {
      dynamicHTML: '<p>动态HTML代码</p>'
    }
  }
}
</script>

Dalam contoh ini, kami menghantar kod HTML dinamik '< ;p> ;Kod HTML dinamik

方法二：使用Vue的自定义指令
除了使用插槽机制之外，Vue还提供了自定义指令的方式来绕过默认的安全设置。我们可以创建一个自定义指令，然后将动态HTML代码赋值给元素的innerHTML属性。下面是一个示例代码：

Vue.directive('html', (el, binding) => {
  el.innerHTML = binding.value;
});

在这个代码示例中，我们创建了一个名为html的自定义指令，接受一个值binding。然后我们将binding的值赋值给元素的innerHTML属性，从而实现对动态HTML代码的渲染。

使用这个自定义指令的时候，可以将动态HTML代码以指令的形式传递给元素，如下所示：

<template>
  <div v-html="dynamicHTML"></div>
</template>

<script>
export default {
  data() {
    return {
      dynamicHTML: '<p>动态HTML代码</p>'
    }
  }
}
</script>

在这个示例中，我们将动态HTML代码'<p>动态HTML代码</p>'

Selain menggunakan mekanisme slot, Vue juga menyediakan arahan tersuai untuk memintas tetapan keselamatan lalai. Kami boleh membuat arahan tersuai dan menetapkan kod HTML dinamik kepada atribut HTML dalaman bagi elemen tersebut. Berikut ialah contoh kod:
rrreee

Atas ialah kandungan terperinci Ralat Vue: Tidak dapat menggunakan v-html dengan betul untuk memaparkan kod HTML dinamik, bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!