Search code examples
vue.jsnuxt.jsvue-multiselect

Display one object property value, and show another one on hover

the question I have might be hard to understand, so please help me re-organize the question if you can see the better way to put it in.

So, I am building a registration platform.

(1) First, I receive an array of objects of cases the user can sign time to.

enter image description here

(2) Each object consists of 2 properties, "name", "description".

enter image description here

(3) I store the array in the data, end use it in the element provided by a picker called "vue-multiselect", which basically accepts the array and loops over the objects and displays them.

enter image description here

enter image description here

(4) As you can see, it displays both properties and values, which I am trying to avoid. My question is, is it possible to pass only the "name" value into the picker, and display the description value when hovering the first value?

Solution

  • You can find this use case documentation here: https://vue-multiselect.js.org/#sub-custom-option-template

    <multiselect v-model="value" 
             deselect-label=""
             select-label="" 
             placeholder="" 
             selected-label="" 
             :show-pointer="true"
             :options="projectCases">

    <template slot="option" slot-scope="{ option }">
        <strong :title="option.description">{{ option.name }}</strong>
    </template>
</multiselect>

    ps: I use title attribute to implement display-on-hover functionality. you can use any other tooltip library as well.