option and selected-option can be templated

[edwindj]

Thx for your great implementation!

I have made the following addition so options and selected-options can be templated, which is I think the underlying request of issue #193.

The following example from "dev.html" show a list of countries:

<v-select placeholder="custom option template" :options="options" multiple>

The changes I have made to vue-select make to following possible (showing the flags of the countries):

<v-select placeholder="custom option template" :options="options" multiple>
  <template slot="selected-option" scope="option">
    <img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/> 
      {{option.label}}
  </template>
  <template slot="option" scope="option">
    <img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/> 
      {{option.label}} ({{option.value}})
    </template>
</v-select>

(if you happen to have a better link to country flags, just change the urls...)

Best regards,

Edwin

[sagalbot]

@edwindj thank you for the contribution! This has probably been the number one requested feature and has been on my roadmap for a long time now. When I saw scoped slots came out, I figured this would be possible but hadn't investigated yet. Going to checkout the branch and have a look now - but I don't expect to request any changes. Planning to have this rolled into the v2.3.0 release.

[sagalbot]

I wonder if the API could be simplified just a touch by making the option slot the default, just so that you don't have to add the slot attribute. What are your thoughts?

[edwindj]

I think that is a good idea! Simple beats complex :-) Op di 2 mei 2017 20:56 schreef Jeff <notifications@github.com>:

…

I wonder if the API could be simplified just a touch by making the option slot the default, just so that you don't have to add the slot attribute. What are your thoughts? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#202 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAhHHOV_jD7xiNCiNiUDQC9gawZOHuE3ks5r13xEgaJpZM4NN2y_> .

[marlonbuendia]

this isn't working for me.

                      <v-select
                        :on-change="selectBankProvider"
                        :options="bank_login.us_banks"
                        placeholder='Choose US Bank Provider'
                        label="bank_name"
                      >
                        <template slot="selected-option" scope="option">
                           testing
                        </template>
                      </v-select>

[edwindj]

@marlonbuendia Did you check on the pull request? (note that the changes are not yet integrated in the master branch).

git fetch origin pull/202/head:optiontemplate
git checkout optiontemplate

[marlonbuendia]

@edwindj I did this:

git clone https://github.com/sagalbot/vue-select.git
git fetch origin pull/202/head:optiontemplate
git checkout optiontemplate

result:

sh-3.2# cd vue-select/
sh-3.2# git fetch origin pull/202/head:optiontemplate
remote: Counting objects: 9, done.
remote: Compressing objects: 100% (8/8), done.
remote: Total 9 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (9/9), done.
From https://github.com/sagalbot/vue-select

• [new ref] refs/pull/202/head -> optiontemplate
  sh-3.2# git checkout optiontemplate
  Switched to branch 'optiontemplate'

what is next?

Should i replace node_modules/vue-select with this one?

I tried to rename the original: node_modules/vue-select_old
then copy the cloned one to node_modules.

Its still not working.

[marlonbuendia]

@sagalbot Hi did ever get to run it? How did you do implement it? im using webpack

[edwindj]

It is running for me in the development environment:
npm run dev
http://localhost:8080 and the last example

[marlonbuendia]

@edwindj i still do not know how to make it run with templates. ill probably wait for the production update. for the mean time i am using vue-multiselect there template works perfectly with images.

[JustLey]

Great PR, I'm already using it! I was wondering, does it support multiple lines for the option template? Like:

Picture NAME/username
email

Edit: nevermind, my json response was lacking an information :) did it by separating the picture and all the multiline text from one another (with a div)

[marlonbuendia]

@JustLey how did you do it?

[ecmel]

Any news about status of this PR and version 2.3.0?

[marlonbuendia]

No news, Im using vue-multiselect

…

On Tue, May 9, 2017 at 1:35 PM, Ecmel Ercan ***@***.***> wrote: Any news about status of this PR and version 2.3.0? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#202 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AI-TqMWBOpGAchFsYAppNBB90_FadTzEks5r3_s2gaJpZM4NN2y_> .

-- Marlon Buendia

[edwindj]

@marlonbuendia My PR does not include an updated vue-select.js (since that is undesired for PR's, only code-changes). To build the vue-select.js file, you will need to do the following from within the downloaded directory

npm install
npm run build

(the first command installs all build tools, the second builds all files needed for vue-select).
Hope this helps! Otherwise we have to wait until version 2.3.0.

[sagalbot]

@ecmel - sorry for the delay, just started a new job and haven't had much spare time to get this release pushed out. Things have settled a bit now, hoping to get this out in the next few days. Thanks for your patience!

[marlonbuendia]

@sagalbot great! ill probably use this instead of vue-multiselect

[marcelotk15]

pls merge will be awesome 💃 😄

[clarkeash]

This would be great 😄

[pymarco]

+1 please

[pymarco]

It appears this modification simply wraps the call to getOptionLabel with a slot.

Is anything further needed for this to merge?

[sagalbot]

Option templating

[hemulin]

@edwindj Thanks for this great contribution.
Quick question:
I'm using the example you've provided in the beginning of this thread, and have a problem where the remove button (the small x) is falling out of line with the rest of the option

The code that generates this (pug syntax):

h5 Countries
  v-select(@input="tagChange", :value.sync="this.countryTags", :options='allCountryTags', label='name', multiple)
    template(slot="selected-option" scope="option")
      div(v-if="option.icon !== null")
        img(:src="option.icon")
        |  {{ option.name }}
      template(slot="option" scope="option")
        div(v-if="option.icon !== null")
          img(:src="option.icon")
          |  {{ option.name }}

Any idea how can I control the button to be aligned with the rest of the option?