鍍金池/ 問答/HTML5  HTML/ v-model 渲染數(shù)據(jù)的一些問題

v-model 渲染數(shù)據(jù)的一些問題

當(dāng)我使用：

<el-form-item label="是否發(fā)布：">
          <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>

后臺返回的數(shù)據(jù)：

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

問題出現(xiàn)了，當(dāng)后臺返回的是布爾值的話，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>

同樣的問題不止是布爾值，當(dāng)typeId=的數(shù)值沒有加引號，那v-model無法正常的預(yù)選項。。。
于是我想說使用typeId='"' + 1 + '"' 這樣處理，但是仍然無效

回答
編輯回答
逗婦惱

也許是因為這個

2018年7月28日 08:57
編輯回答
念初

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

因為直接寫html屬性的話，值都是string類型，和boolean類型自然無法嚴(yán)格相等（===）。同理，typeId是number類型，也無法和string類型嚴(yán)格相等，vue對此有提供修飾符解決這種問題，即v-model.number

手機碼字，排版不好請勿見怪～

2018年7月21日 14:28
編輯回答
茍活

把true，false直接換成‘是’，‘否’就好了，不然就加載完數(shù)據(jù)對數(shù)據(jù)進行處理，而且不需要typeid，它會自動根據(jù)你的hasRelease顯示正確的值

2017年10月3日 12:19
編輯回答
枕頭人

給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>
2017年10月30日 09:55