我可以使用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>