shentao/vue-multiselect

noResult emit close and open in all vue multiselect in a component

Open

#837 opened on Oct 3, 2018

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (994 forks)batch import
bughelp wanted

Repository metrics

Stars
 (6,559 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Steps to reproduce

I have a componente with vue multiselect with this code in noResult:

      <span v-if="permiteCriarNovo" slot="noResult" style="display:flex; justify-content:space-between">
        <span><i style="color:#A9A9A9"> {{pesquisa}}</i></span>
        <a sytle="text-align: right" href="javascript: void(0)" @click.stop="criarCadastro">Criar</a>          
      </span>

  criarCadastro() {        <-- methods criar
    if (!this.modalCadastro) {        
      this.servico
          .cadastra(JSON.parse('{"'+this.campoNome+'":"'+this.pesquisa+'"}'))
          .then(response =>{
              response.json().then((documento) => {
                this.opcoes.push(documento.data)                                 
                this.$notify({
                  group: 'salvar',
                  title: 'Sucesso',
                  type: 'success',
                  text: this.caption+' salva com sucesso.',
                  duration: 2000
                });                 
              })
          }, err => {
              console.log('Não foi possível cadastrar o elemento')
          });
    }
    else {
        this.$emit('mostralModal',this.pesquisa)
    }
    
  }

When i click in Criar emits a open and close event in all vue-multiselect in the component.

Expected behaviour

Emit the event only in the component I click.

Contributor guide

Research direction
Investigate the event emission mechanism in the noResult slot. The issue suggests that clicking 'Criar' triggers open/close on all multiselect instances. Trace the event flow to see if the click event is propagating to parent components or if there's a global event bus being used. Check if the `criarCadastro` method emits an event that is listened to by other multiselect instances. Look for any event listeners on `this.$emit` or parent components that might catch the event. Also examine if the `noResult` slot is being rendered in a shared context.
Tech stack
vuejavascript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Vue.jsJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65