解决element-ui中的el-select选择器无法显示选中

问题描述：今天本人在编写前端页面时突然发现引用的element-ui中的el-select选择器无法显示选中内容，但是当我把表单数据全部填写完后打算上交时，el-select选择器的内容又能够出现我首次选择的东西了，但是点击其它无效，不能够切换数据。对数据修改时毫不影响el-select选择器的使用。
问题代码：

 <div class="form-group">
     <div class="col-sm-2 control-label">职称</div>
           <el-select v-model="teachers.jobname" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
           </el-select>
</div>

var vm = new Vue({
    el:'#rrapp',
    data:{
        showList: true,
        title: null,
        options: [{
            value: '助教',
            label: '助教'
        }, {
            value: '讲师',
            label: '讲师'
        }, {
            value: '副教授',
            label: '副教授'
        }, {
            value: '教授',
            label: '教授'
        }],
        value:''

原因：查看Vue.js官网文档。

image.png

本人理解的是，在首次初始化之后，便不会在进行加载渲染了，需要我们手动去执行渲染方法去重新加载它。

解决方案：使用Vue.js官方提供的vm.$forceUpdate()方法，该方法作用是迫使Vue实例重新渲染。

 <div class="form-group">
     <div class="col-sm-2 control-label">职称</div>
           <el-select v-model="teachers.jobname" placeholder="请选择" @change="$forceUpdate()">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
           </el-select>
</div>

————————————————
版权声明：本文为CSDN博主「一条代码鱼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fish332/article/details/110280256