Vue-给对象新增属性（使用Vue.$set()），动态渲染

￡神魔★判官ぃ 2023-03-06 05:17 27阅读 0赞

### 一、错误实例 ###

（vue中await去调接口，有时差，数据回来，页面已经渲染过了）：

vue中：
              query["query.contractId"] = info.contractId;
              this.contractData[info.partnerId] = await getContractListByQuery(query);
    
    页面：
    
    <el-table-column
                      prop="contractId"
                      label="合同">
                <template v-slot="tData">
                  
                  {
       {contractData}}
                  <el-select v-model="tData.row['contractId']" @change="changeSettlementType(tData.row)" placeholder="请选择">
                    <el-option
                            v-for="item in contractData[tData.row.partnerId]"
                            :key="item.id"
                            :label="item.contractNumber"
                            :value="item.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70][]

### 二、用$set()，动态改值，动态渲染 ###

（我感觉：页面已渲染，后续对象变更，他也会主动触发再次渲染）

[$set()说明传送门][set]

调整vue部分：          
    const res = await getContractListByQuery(query);
    this.$set(this.contractData, info.partnerId, res);

对象出来了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70]: /images/20230208/e7249ee238834feca83c0d5ca0dfa527.png
[set]: https://www.jianshu.com/p/71b1807b1815
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70 1]: /images/20230208/5b4e350e030f42dd8d1a8afa1364320b.png