javascript - Vuetify v-dialog 中的 HTML
问题描述
我正在尝试将格式化的 HTML 添加到 v-dialog 的内部。我里面有一张 v-card,但我把它撕掉了,所以我可以从头开始。这是我到目前为止所拥有的
<v-dialog v-model="dialogPubs" scrollable max-width="950px">
<div>{{editedItem.Publication}}</div>
</v-dialog>
{{editedItem.Publication}} 包含带有颜色变化的格式化 HTML 以及超链接。我已经看到在哪里使用 v-card 和 v-html 的 v-text 应该可以工作,但它不适合我。
我有一个数据表,当我双击一行时,会弹出带有格式化 HTML 的对话框,但我得到的是纯文本。如果我需要把 v-card 放回去,只要我能渲染 HTML 就可以了。谢谢。
解决方案
请仔细检查您的使用方式v-html
。您需要在将包含 HTML 的元素上使用它,并且需要将其添加为绑定到data
包含 HTML 字符串的属性的属性。请看下文。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
show: true,
stuff: "<span><strong>hello</strong> <span>world</span></span>"
};
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-layout>
<v-dialog v-model="show" scrollable max-width="950px">
<v-card>
<div v-html="stuff"></div>
</v-card>
</v-dialog>
</v-layout>
</v-content>
</v-app>
</div>
推荐阅读
- angularjs - 在 angularjs-gridster 单元格中显示图像
- android - 使用改造 2 上传文件 - 文件正在上传,但在“onFailure”响应
- django - Django 如何使用带有静态/模板的 npm 模块
- c# - 使用 VSTS Git API 创建初始推送到新创建的存储库
- jwt - 适用于 JWT 的 Azure AD 签名密钥
- ios - 在iOS中将大文件数据存储到Coredata中的最佳方法是什么
- excel-formula - 动态选择一个excel元素
- tsql - TSQL Pivot - 如此简单却让我大吃一惊
- c# - How to redirect to another action inside a function
- android - WorkManager 实例即使在应用程序被卸载后仍保持活动状态 (?)