vue.js를 사용하여 선택 옵션에서 동적 툴팁을 설정할 수 있습니까?

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.display}}이 표시됩니다.이 방법으로 제목 속성의 값을 동적으로 설정하는 방법이 있습니까?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>

언급URL : https://stackoverflow.com/questions/63524217/can-i-set-a-dynamic-tooltip-in-a-select-option-using-vue-js