javascript - 我可以使用 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
,但不幸的是,不是数组中设置的标题值 - 而是显示 {{source.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>
推荐阅读
- java - 使用带有 L1 的 Infinispan 9 嵌入式缓存时线程被阻止
- javascript - Blob 图像未按正确顺序推送到数组
- javascript - 如何录制网络摄像头视频并跨多个页面继续录制
- haskell - Haskell 预处理器中的 % 是什么,它与 Uint8 之类的类型(如果有的话)有什么关系?
- neo4j - neo4j 密码过滤器节点 apoc dijkstra
- tarantool - “error_marshaling_enabled”设置似乎总是启用
- php - yii2,用新数据部分渲染视图
- javascript - 是否可以使用 chrome.desktopCapture API 仅捕获音频?
- postgresql - 使用 LAG 函数更新表
- scala - gnutls_handshake() 失败:TLS 连接未正确终止