如何在選擇vue.js中獲得價值？ vue.js 2

Question

我的情況是這樣的

我有這樣一個組件：

<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> 

組件具有子組件，也就是位置-BS-選擇。用於顯示provincy和城市

組件孩子喜歡這個組件：

<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> 

如果我做檢查元素，結果是這樣的：

當點擊按鈕搜索，我想得到省和市的價值

我試試這樣的javascript：

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

它的工作原理

但我想用VUE一步。我嘗試這樣的：

console.log(this.province_id) 

它不工作

我怎樣才能解決呢？

Answer 1

我希望我能幫到你。您想要將選擇的值傳播回父級。子組件可能會是這樣的。

• 刪除模板嵌套
• 加入變化事件監聽器和發射方法
• 添加數據

而且所有一起：

<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> 

現在你的父母需要聽這個EMIT 。這裏只是你父母的相關部分

... 

<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); 

    } 
} 

迅速總結了

• 選擇值綁定到你所選擇的數據支撐
• 選擇有一個附加的變化事件，會發出變化
• 家長會聽這EMIT並不斷更新它的相關數據支撐