How to clear VsSelect options

[ccalvarez]

Hi.

How do I clear (unselect all options) of a vs-select?

Thank you.

[jsinhSolanki]

Hi, If you have v-model="selectedOptions" then on click event you can set this property selectedOptions to empty array.

<vs-button @click="selectedOptions = []">Clear All</vs-button>

I hope this will work.

[guastallaigor]

I think she wanted that built in the select component, similar to this, but unfortunately there isn't one yet.

[ccalvarez]

I have a vs-select inside a vs-popup, and the vs-select is populated using v-for:

 <vs-popup classContent="popup-example" title="Tarea" :active.sync="popupIsActive">
  <vs-input class="inputx" placeholder="Descripción de la tarea" v-model="taskDescription"/>
  <vs-select label="Sistema" v-model="projectId">
    <vs-select-item
      :key="project._id"
      :value="project._id"
      :text="project.name"
      v-for="project in projects"
    ></vs-select-item>
  </vs-select>
</vs-popup>

When the popup is loaded for the first time, the vs-select loads with all options unselected:

Then the user selects an option, and saves the item, and then I close the popup.

But the next time the popup is loaded, it shows the previous selection the user made in the vs-select:

What I would like is to clear just the selection in the vs-select component, but not clearing the projects array which v-for iterates, because I need the projects to be available for a next selection.

Thank you.

[guastallaigor]

I'm sorry but I don't think I understand the problem here.
When it runs for the first time the options are all unselected because your projectId variable set in the v-model is probably set to [].
When you select a few, close it and open it again, if your component wasn't destroyed right there, your projectId is going to maintain the same values as before.
So when you open again, they are still going to appear as selected.

1.Did you try to set projectId to [] after save or before closing the popup?
2.On the second case, is this an "edit" situation or a "create" situation?

[luisDanielRoviraContreras]

I do not really understand the problem, sorry you could help me to solve it, thank you very much for the contribution

[ccalvarez]

What I need is to unselect the previuos selection. I think the solution is not clearing the array.

The projectId variable is not binded to the array. It holds the value of the selected item, as the v-model variables in the example: https://lusaxweb.github.io/vuesax/components/selects.html#single-selection

This is a "create" situation.

[guastallaigor]

Yes, that's right.
The solution that I proposed to you is not clear the array that is used in the v-for, but to clear the array that is used in the v-model, in your case the projectId when you closed the modal. Did you try it?
Could you please create a sandbox to demonstrate if it isn't working?

[luisDanielRoviraContreras]

@ccalvarez You could create a jsfiddle of the whole context and what does not work, to help you

[rccursach]

@ccalvarez this is not really a <select>, so it doesn't behave exactly like one.
I had the same issue recently, I did something like this example:

<vs-select v-model="product.category_id" label="Categories">
      <vs-select-item :key="0" :value="''" :disabled="true" v-show="false"/>
      <vs-select-item
          :key="item.id"
          :value="item.id"
          :text="item.name"
          v-for="item in categories"
      />
</vs-select>

Look at the first vs-select-item, holds an empty string as value. so, whenever your v-model value gets equal to an empty string, the option gets "cleared".

I don't use popups, but another component. whenever I "clear" my model with this:

clearForm() {
  Object.keys(this.product).forEach(el => this.product[el] = '')
}

the select options gets blank again. then is up to you to validate and all that stuff.

beware that the :key value I put is 0 because my items have unique ids, you can put whatever you want.

[mhrahul]

One easy solution for dynamic list
<vs-select-item :key="0" :value="''" text="No Parent" /> <vs-select-item :key="index+1" :value="item.id" :text="item.section_no" v-for="(item,index) in paretnparticu" />

[fuoridallarete]

Thanks to @rccursach hint, I slightly changed its code to fit my needs as follow:

<vs-select-item
      :key="0"
      :text="$t('Statistics.line')"
      v-show="selectedLine"
      @click="selectedLine = !selectedLine"
 />

Few things to keep in mind:
key as 0 is ok as far as you don't use index as the key of the others (real) items, otherwise it may causes update errors.

I used :text instead of :value. I didn't need its value -it's just a fake item after all - I needed to display the initial placeholder value (I am using i18n to display strings in the template).

I removed disabled=true: the syntax appears incorrect, but anyway I wanted to be able to click on it to call an action.

Really thanks to @rccursach for pointing me to the right direction.