Question

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

的组件中，

[{'group': 'fans',
  'groupID': '1',
  'user': [{'first': 'Caroline', 'last': 'Smith'},
           {'first': 'Jenny', 'last': 'White'}]},
 {'group': 'students',
  'groupID': '2',
  'user': [{'first': 'Ben', 'last': 'CJ'},
           {'first': 'Joan', 'last': 'Carpenter'}]}]

上面的内容在初始化Bootstrap工具提示时显示得很好，但是如果我将其显示在JSON文件中，例如

<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版本。有任何线索吗？

相关代码：

{
    "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"
}

上面发布的JSON中的相关属性“文本”通过

呈现

<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文件中Vue.js中的Bootstrap工具提示

0 个答案: