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

本文链接：https://blog.csdn.net/fish332/article/details/110280256

问题描述：今天本人在编写前端页面时突然发现引用的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官网文档。
在这里插入图片描述
本人理解的是，在首次初始化之后，便不会在进行加载渲染了，需要我们手动去执行渲染方法去重新加载它。

解决方案：使用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>