如何在选择 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>

组件有子组件，即location-bs-select。用于显示省市的组件

这样的子组件：

<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

希望我没听错。您希望将选择的值传播回父级。 Child 组件可能是这样的。

• 移除了模板嵌套
• 添加了更改事件侦听器和发出方法
• 添加数据

一起来：

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

现在你的父母需要听这个发射。这里只是你父母的相关部分

...

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

   }
}

快速总结

• 选择值绑定到数据的选定属性
• 选择有一个附加的更改事件，该事件将发出更改
• 父级会监听这个发射并更新它的相关数据属性