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

我希望我帮到你。您希望将select的值传播回父级。子组件可能是这样的。

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

所有在一起：

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

   }
}

快速总结

选择值绑定到您选择的数据支柱
select有一个附加的更改事件，它将发出更改
父母将听取此发射并将更新其相关数据道具

如何在select vue.js中获得价值？ vue.js 2

1 个答案: