vue点击下拉框的某一个选项，这个的值的接口数据如何同步渲染到另一个div盒子上？

作者站长头像
站长
· 阅读数 20

选择点击基本、婚姻、生育其中的一个，对应的数据渲染到下面的div里面，因为渲染完每条数据的前面都有一个复选款所以用了el-checkbox。

            <el-form-item label="查询条件:">
              <el-select
                placeholder="请选择查询条件"
                v-model="form.condition"
                @change="updateFieldData"
              >
                <el-option label="基本情况" value="basic"></el-option>
                <el-option label="婚姻状况" value="marriage"></el-option>
                <el-option label="生育情况" value="birth"></el-option>
              </el-select>
            </el-form-item>
            <!-- 选择完某一个el-option，数据渲染到这里 -->
            <div class="condition-field">
              <div class="field">
                 <el-checkbox v-for="data in fieldData" :key="data.id">
                    {{data.label}}
                 </el-checkbox>
              </div>
            </div>

vue点击下拉框的某一个选项，这个的值的接口数据如何同步渲染到另一个div盒子上？上面这个是自己弄的死数据

vue点击下拉框的某一个选项，这个的值的接口数据如何同步渲染到另一个div盒子上？现在的接口数据是这样，请问我应该怎么再去做修改让选择完对应的数据渲染上呢？vue点击下拉框的某一个选项，这个的值的接口数据如何同步渲染到另一个div盒子上？

回复
1个回答
avatar
test
2024-07-01

最好是有一个获取下拉枚举的接口，和返回数据的key对应上就方便点，不然就写死了

接口返回的数据this.allData = res.data获取选择后数据this.fieldData = this.allData[condition]选择完某一个el-option，遍历的时候改下

<div class="condition-field">
      <div class="field">
        <el-checkbox v-for="data in fieldData" :key="Object.keys(data)[0]">
          {{ Object.values(data)[0] }}
        </el-checkbox>
      </div>
    </div>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容