如何解决我可以使用vue.js在选择选项中设置动态工具提示吗?
我在vue中声明了一个数组。
sourceSelect: [
{ text: "Option 1",value: "1",title: "First tooltip" },{ text: "Option 2",value: "2",title: "Second tooltip" },{ text: "Option 3",value: "3",title: "Third tooltip" }
],
我在标记中有一个选择元素:
<select class="form-group col-sm-8" v-on:change="showOptions" v-model="sourceSelected" data-toggle="tooltip" data-placement="top" data-html="true">
<option v-for="source in sourceSelect" v-bind:value="source.value" title={{source.title}} >{{source.text}}</option>
</select>
下拉菜单显示选项,并显示tooltip
,但不幸的是,数组中未设置 title 值-而是显示了{{source.title}}。有没有办法以这种方式动态设置title属性的值?我正在使用vue.2.6.10
解决方法
您应该像使用value
属性那样进行绑定:
<option v-for="source in sourceSelect" v-bind:value="source.value" v-bind:title="source.title" >{{source.text}}</option>
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',data() {
return {
sourceSelect: [{
text: "Option 1",value: "1",title: "First tooltip"
},{
text: "Option 2",value: "2",title: "Second tooltip"
},{
text: "Option 3",value: "3",title: "Third tooltip"
}
]
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<select class="form-group col-sm-8" data-toggle="tooltip" data-placement="top" data-html="true">
<option v-for="source in sourceSelect" v-bind:value="source.value" :title="source.title">{{source.text}}</option>
</select>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。