Vuetify 代码未在 `v-html` vuejs 中呈现

Question

我需要在 vuejs 的 v-html 中渲染 vuetify v-image 请查看代码和附加图片

<template>
  <v-card>
    <v-card-title>2</v-card-title>
    <div v-html="test"></div>
  </v-card>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "slot2",
  data() {
    return {
      test: `<v-img
              lazy-src="https://picsum.photos/id/11/10/6"
              max-height="150"
              max-width="250"
              src="https://picsum.photos/id/11/500/300"
            ></v-img>`,
    };
  },
});
</script>

Answer 1

正如@kissu所说， v-html用于渲染 HTML 而不是 Vue 组件。

此外，我在这里没有看到任何将整个 Vuetify 组件传递到 HTML 模板的用例。 相反，您可以动态绑定数据（即图像 src），而不是传递/绑定整个 Vuetify 组件。

 new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ imgLazySrc: 'https://picsum.photos/id/11/10/6', imgSrc: 'https://picsum.photos/id/11/500/300' }), })

 <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.9/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.9/dist/vuetify.min.css"/> <div id="app"> <v-app id="inspire"> <v-img:lazy-src="imgLazySrc" max-height="150" max-width="250":src="imgSrc" ></v-img> </v-app> </div>