时间戳

首页 > 解决方案 > 来自 JSON 文件的 Vue.js 中的引导工具提示

javascript - 来自 JSON 文件的 Vue.js 中的引导工具提示

问题描述

目前正在尝试通过 Vue.js 中的 json 文件显示 Bootstrap 工具提示。我的 JSON 文件包含应该在特定组件上显示的所有内容，但它没有初始化 Bootstrap。如果我只是简单地将 Bootstrap 4 工具提示演示复制并粘贴到类似的组件中

<button type="button" class="btn btn-secondary" data-toggle="tooltip" 
data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
    Tooltip with HTML
</button>

我上面的内容在 Bootstrap 工具提示被初始化的情况下显示得非常好，但是如果我将它显示在我的 JSON 文件中，例如

{
    "text":"Modern vehicles are made up of many different parts. Learning how these parts work together may seem challenging. However, maintaining and operating your car economically and safely is not as difficult as you think.<br><a href=\"{0}California.htm#CONSTRUCTION\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"Tooltip on bottom\">Read more</a> about vehicle’s basic parts and components and how they work together.",
    "text_type":"paragraph"
}

该按钮显示正常，但正在显示工具提示 - 至少不是它的 Bootstrap 版本。有什么线索吗？

相关代码：

<template>
<div>                
    <p v-if="hasSubTitle" v-html="slideData.subtitle" class='subtitle'></p>

    <p v-html="slideData.text" class='text-paragraph'></p>

    <div v-if="hasImage" >
        <img v-if="hasImage" :src="playerConfig.GraphicPath + slideData.graphic" class="img-fluid" /> 
    </div>

    <div class='media-div' v-if="hasVideo">
        <videoPlayer 
            ref="videoPlayer"             
            :url="playerConfig.StreamingHTTPSLecture + slideData.graphic"
            :posterUrl ="playerConfig.PosterPath"

             v-on:videoEnded="onVideoEnded" 
             v-on:videoTimeUpdate="onVideoTimeUpdate"
        ></videoPlayer>             
    </div>

</div>  
</template>

上面发布的 JSON 中的相关属性“text”正在通过

<p v-html="slideData.text" class="text-paragraph'></p>

标签： javascriptjsonvue.jsbootstrap-4

解决方案

推荐阅读