我可以使用 vue.js 在 select 选项中设置动态工具提示吗？

Question

I have an array declared in 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" }
],

I have a select element in my markup:

<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>

The drop-down shows the options, and shows a tooltip , but unfortunately not the title values setup in the array - rather it shows {{source.title}}. Is there any way of setting up the values for a title attribute dynamically in this way? I'm using vue.2.6.10

Answer 1

You should bind as you did with value attribute:

 <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>