Wie kann ich Wert in ausgewählten vue.js erhalten? vue.js 2

Question

Mein Fall ist wie dies

ich eine Komponente wie diese:

<template> 
    <div class="panel panel-default panel-filter"> 
     ... 
      <div id="collapse-location" class="collapse in"> 
       <!-- province --> 
       <div style="margin-bottom: 10px"> 
        <location-bs-select element-name="province_id" level="provinceList" type="1" module="searchByLocation"/> 
       </div> 
       <!-- city --> 
       <location-bs-select element-name="city_id" level="cityList" type="2" module="searchByLocation"/> 
      </div> 

      <!-- button search --> 
      <div class="panel-item"> 
       <br> 
       <a href="javascript:;" class="btn btn-block btn-success" v-on:click="searchData"> 
        Search 
       </a> 
      </div> 
     ... 
    </div> 
</template> 

<script> 
    export default{ 
     ... 
     data() { 
      return{ 
       ... 
       province_id:'', 
      } 
     }, 
     ... 
     methods: { 
      ... 
      searchData: function() { 
       console.log(this.province_id) 
       console.log(document.getElementsByName("province_id")[0].value) 
       console.log('testtt') 
      } 
     } 
    } 
</script> 

Die Komponente untergeordnete Komponente aufweist, dh orts bs-select. Die Komponente provincy und Stadt anzuzeigen

Die Komponente Kind wie folgt aus:

<template> 
    <select class="form-control" v-model="selected" :name="elementName" @change="changeLocation"> 
     <template v-for="option in options"> 
      <template> 
       <option v-bind:value="option.id" >{{ option.name }}</option> 
      </template> 
     </template> 
    </select> 
</template> 
<script> 
    export default{ 
     props: ['elementName', 'level','type','module'], 
     ... 
    }; 
</script> 

Wenn ich Element tun prüfen, das Ergebnis wie folgt aus:

Wenn klicken Sie auf Suchen, Ich möchte den Wert der Provinz und Stadt

bekommen Ich versuche Javascript wie folgt:

console.log(document.getElementsByName("province_id")[0].value) 

es funktioniert

Aber ich will vue Schritt verwenden. Ich versuche so:

console.log(this.province_id) 

Es ist nicht

funktioniert Wie kann ich es lösen?

Answer 1

Ich hoffe, ich habe dich richtig gemacht. Sie möchten den Wert der Auswahl zurück an den übergeordneten Wert weitergeben. Die Child-Komponente könnte so sein.

• entfernt Vorlage
• hinzugefügt Änderung Ereignis-Listener nisten und emittieren Methode
• addierten Daten

Und alle zusammen:

<template> 
    <select @change="emitChange" class="form-control" v-model="selected" :name="elementName"> 

     <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option> 

    </select> 
</template> 
<script> 
    export default{ 
     props: ['elementName', 'level','type','module'], 
     data: function() { 
      return { selected: null } 
     }, 
     methods: { 
      emitChange: function() { 
       this.$emit('changeval', this.selected); 
      } 
     } 
    }; 
</script> 

nun Ihre Eltern auf diese emit zu hören braucht . Hier nur die relevanten Teile Ihrer Mutter

... 

<location-bs-select element-name="city_id" 
        level="cityList" 
        type="2" 
        @changeval="changeval" 
        module="searchByLocation"/> 


... 

methods: { 
    changeval: function(sValue) { 

     this.province_id = sValue; 
     console.log(this.province_id); 

    } 
} 

schnell aufsummiert

• der Auswahlwert an die ausgewählten prop Ihrer Daten
• die Auswahl hat gebunden ist, ein angeschlossenes Wechselereignis, die Änderungen werden emittieren
• wird die Eltern auf diese emit hören und aktualisiert sie relevanten Daten stützen