el-select中使用v-model绑定数据，结果显示错误？

Question

图一，我el-select使用v-model绑定infoForm，省，市，区分别对应的是inforForm中的province，city，district，选择后infoForm的内容确实更改了，而且“省”，“市”显示都没问题，但 “区” 却显示 不限（默认）的。

图二中的弹窗和图一使用的是同部分代码，显示没问题。

 <!-- 添加，编辑弹框  -->
    <el-dialog
      @close="closeDialog(infoForm)"
      :title="setInfo?'公众号编辑':'公众号添加'"
      :append-to-body="true"
      :visible.sync="dialogFormVisible"
      width="1100px"
      center
    >
      <el-form
        :ref="infoForm"
        label="left"
        :model="infoForm"
        label-width="110px"
        :key="timer"
        :inline="true"
        >


        <!-- 隐藏部分-->
        <el-form-item label="区">
          <el-select
            v-model="infoForm.district"
            @change="changeDistrict"
            placeholder="区"
          >
            <el-option
              v-for="item in districtList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <div>{{infoForm.district}}</div>
        </el-form-item>
        <!-- 隐藏部分-->

        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitInfo(infoForm)">确定</el-button>
      </div>
    </el-dialog>

而且el-select选择时如果已经有值在下拉框中会相应的加深颜色，我在新增中多次选择 “区” 时，也有相应的加深颜色。
整篇下来有问题的只有新增中 “区” 的显示。

我想知道这到底怎么回事？

5/11
找到解决方案了。
option绑定district还是districtId不影响显示结果；使用$set()页面显示没问题，但控制台会报district is not defined
解决方法是data的infoForm里写上district,公众号添加重置infoForm时也写上district

Answer 1

这种问题一般有两个可能：

1. 绑定变量没对上；
2. 如果变量绑对了，很可能是对应的属性一开始没有，是后加的，导致这个属性不是响应式的，这时可以使用$set()方法重置一下对应的属性。

Answer 2

infoForm.district是区的名字，但是你option那里的value是区的id