javascript - element-ui(Vue.js) 我在做二级select联动时选中值是循环的value怎么解?

查看:715
本文介绍了javascript - element-ui(Vue.js) 我在做二级select联动时选中值是循环的value怎么解?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

代码不多,我直接贴上来

  <el-col :span="6">
  <div class="grid-content bg-purple">
    <el-select
        v-model="selectSchool"
        placeholder="请选择学校"
        v-on:change="getClasses()">
    <el-option
        v-for="item in schools"
        :label="item.label"
        value="item.value">
    </el-option>
    </el-select>
  </div>
  </el-col>

  <el-col :span="6">
  <div class="grid-content bg-purple">
    <el-select
        v-model="selectClass"
        placeholder="请选择班级"
        v-on:change="getStudents()">
    <el-option
        v-for="item in classes"
        :label="item.label"
        :value="item.value">
    </el-option>
    </el-select>
  </div>
  </el-col>

以上是HTML部分

以下是js部分

<script>
    new Vue({
        el: '#app',
            data (){
                return {
                    dialogTable: false,
                    typed: 'class',
                    classType: true,
                    phoneType: false,
                    phone: '',
                    userList: [],
                    schools: [],
                    classes: [],
                    students:[],
                    selectStudent: '',
                    selectSchool: '',
                    selectClass: '',
                }
            },
            methods: {
                getClasses: function () {
                    var url = "{{URL::route('xxxx.xxxx',['sid'=>""])}}"+this.selectSchool;
                    this.$http.get(url).then((response) => {
                        console.log(this.selectSchool,this.classes);
                        this.classes = response.data.data;
                    });
                },
                getStudents: function () {
                    var url = "{{URL::route('xxxx.xxxxx',['cid'=>""])}}"+this.selectClass;
                    this.$http.get(url).then((response) => {
                        console.log(response.data.data);
                        this.students = response.data.data;
                    });
                },
                changeType: function () {
                    console.log(this.typed);
                    if (this.typed == 'class') {
                        this.phoneType = false;
                        this.classType = true;
                    } else {
                        this.classType = false;
                        this.phoneType = true;
                    }
                },
                queryPhone: function () {

                },
                queryClass: function () {

                }
            },
            mounted (){
                var url = "{{URL::route('xxxx.xxxx')}}";
                this.$http.get(url).then((response) => {
                    console.log('ready');
                    this.schools = response.data.data;
                });
            }
    });
</script>

当mounted的时候第一个选框有了内容,然后当我选择一个内容后触发getClasses这个方法的时候,第一个选框的选项全部变成蓝色(就像全部选中),打印selectSchools值是 item.value

后端接口没问题可以确定。

js弱,活儿又紧,求帮助。

这个问题已被关闭,原因:问题已解决 - 问题已解决,且对他人无借鉴意义

解决方案

selectSchool中的optionvalue是忘记加了还是你代码粘贴错了。。。

这篇关于javascript - element-ui(Vue.js) 我在做二级select联动时选中值是循环的value怎么解?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆