vue后台接收的v-model的值要怎么在加载前处理

Question

问题描述

 这是表格中一个下拉栏  v-model绑定后台传来的数组数据，但是后台对空数组没有处理，当数据为空，scope.row.environments并非为空而是不存在，所以会报错，我想知道我怎么在v-model加载前对其做个判断，当其不存在时将其设为空

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

    
  <el-table stripe :data="gridData.content" class="mt-10" height="calc(100vh - 270px)"
            v-loading="ServiceController.pagingByCriteria.loading">
    <el-table-column prop="application.name" label="系统名称"></el-table-column>
    <el-table-column prop="name" label="API名称"></el-table-column>
    <el-table-column prop="path" label="API path"></el-table-column>
    <el-table-column prop="schemes" label="URL schemes"></el-table-column>
    <el-table-column prop="state" label="服务状态"></el-table-column>
   <el-table-column prop="environments" label="环境">
     <template slot-scope="scope">
        <el-select v-model="scope.row.environments"  multiple collapse-tags placeholder="请选择">
          <el-option
             v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
           </el-option>
         </el-select>
       </template>
    </el-table-column> 
    <el-table-column  label="操作">
      <template slot-scope="scope">        
       <el-button type="text" icon="el-icon-edit" v-permission="FuncCode.cof_f_sam_edit" @click="openEdit(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table> 

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

scope.row && scope.row.environments

Answer 2

收到数据的时候直接处理一下，在js里

response.then(get => {
  get.data.forEach(item => {
    if (!item.environments) item.environments = []
  })
  this.list = get.data
})

Answer 3

在 created 阶段就可以发起ajax 请求后端数据了，在这期间将后端返回的数据进行处理之后，然后绑定到 v-model 上