v-model 渲染数据的一些问题

Question

当我使用：

<el-form-item label="是否发布：">
          <el-select v-model="temp.hasRelease" placeholder="请选择" style="width: 175px;">
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
          </el-select>
        </el-form-item>

后台返回的数据：

temp: {
          hasRelease: true,
          typeId： 1
        },

问题出现了，当后台返回的是布尔值的话，v-model=布尔值会报错，所以必须要后台返回的true加引号，这样才能正常渲染

<el-form-item label="所属类型：">
          <el-select v-model="temp.typeId" placeholder="请选择">
            <el-option label="类型一" value="1"></el-option>
            <el-option label="类型二" value="2"></el-option>
          </el-select>
        </el-form-item>

同样的问题不止是布尔值，当typeId=的数值没有加引号，那v-model无法正常的预选项。。。
于是我想说使用typeId='"' + 1 + '"' 这样处理，但是仍然无效

Answer 1

将el-option的 value="true" 改成 :value="true" 试试，即v-bind的形式

因为直接写html属性的话，值都是string类型，和boolean类型自然无法严格相等（===）。同理，typeId是number类型，也无法和string类型严格相等，vue对此有提供修饰符解决这种问题，即v-model.number

手机码字，排版不好请勿见怪～

Answer 2

给value前面加上冒号。
或者全部写成这样：

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

Answer 3

也许是因为这个

Answer 4

把true，false直接换成‘是’，‘否’就好了，不然就加载完数据对数据进行处理，而且不需要typeid，它会自动根据你的hasRelease显示正确的值