Vue公司和Vue公司，毛尖HTML內容

Question

我需要顯示vue-tippy元素（https://github.com/KABBOUCHI/vue-tippy）與數據綁定元素內部的HTML內容，但它不工作，

<div id="demo"> 
    <p>{{message}}</p> 
    <br /> 
    <input v-model="message" title="Input"> 
    <br /> 
    Default example (it works) 
    <button title="Hi!" v-tippy> My Button! </button> 
    <br /> 
    Data binding example (it not works) 
    <button title="{{ message }} " v-tippy> {{ message }} </button> 
    <br /> 
    Data binding example (it works) 
    <button :title="message" v-tippy> {{ message }} </button> 

    <br /> 
    Data binding example html content (it not works) 
    <button id="button3" v-tippy data-html="#contentpopup"> {{ message }} - html content </button> 
    <br /> 
    <br /> 
    <div id="contentpopup" style="background:red;"> 
     <div> 
     {{ message }} - My html content 
     </div> 
    </div> 
    <br /> 
</div> 

JS

var vueTippy = require('vue-tippy') 
Vue.use(vueTippy) 

var data = { 
    message: 'Hello Vue.js!' 
} 

var demo = new Vue({ 
    el: '#demo', 
    data: data 
}) 

如何我能解決這個問題嗎？

感謝

Answer 1

我增加了對HTML模板和Vue公司組件支持。

更新vue-tippy包到最新，您的代碼將工作。

例子：

new Vue({ 
 
    el: "#app", 
 
    data() { 
 
    return { 
 
     message: 'Hello Vue.js!' 
 
    } 
 
    } 
 
})

.btn { 
 
    margin: 0; 
 
    color: white; 
 
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3); 
 
    background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5); 
 
    background: linear-gradient(135deg, #73a5ff, #5477f5); 
 
    letter-spacing: 0.5px; 
 
    font-family: inherit; 
 
    display: inline-block; 
 
    font-weight: 400; 
 
    line-height: 1.25; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    border: 1px solid transparent; 
 
    padding: .5rem 1rem; 
 
    font-size: 1rem; 
 
    border-radius: .25rem; 
 
    -webkit-transition: all .2s ease-in-out; 
 
    -o-transition: all .2s ease-in-out; 
 
    transition: all .2s ease-in-out; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script> 
 
<script src="https://kabbouchi.com/vue-tippy/vue-tippy.min.js"></script> 
 

 
<div id="app"> 
 
    <button class="btn" v-tippy data-distance="15" data-theme="light" data-animation="scale" data-arrowsize="big" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true" data-html="#contentpopup"> 
 
    Popover HTML <small class="opacity-low">(click)</small> 
 
    </button> 
 
    <div id="contentpopup" style="display: none"> 
 
    <div> 
 
     <h3> Header</h3> 
 
     <p style="color: black"> {{ message }} - data binding </p> 
 
    </div> 
 
    </div> 
 

 
</div>