数据字典前端渲染过程中v-for和v-if同时使用的问题

数据字典首先要在Vue页面引入进来，放在export default下不用做响应式处理

dicts: ['transport_type']

使用过程中我们会用获取到的数据和数据字典对比，然后取出相对的label值

            <div
              class="zhanghu_top_zh_right"
              v-for="dict in dict.type.transport_type"
              :key="dict.value"
              v-if="dict.value == form.transportType"
            >
              {{ dict.label }}
            </div>

            <div
              class="zhanghu_top_zh_right"
              v-for="dict in dict.type.transport_type"
              :key="dict.value"
              v-show="dict.value == form.transportType"
            >
              {{ dict.label }}
            </div>

在对比的过程中如果v-for和v-if同时使用，会导致语法报错，可以暂时用v-show替换解决

第二种方法是v-if再嵌套一个盒子进行判断，但外层循环盒子会占位

第三种方法是在获取数据的时候在方法内处理好数据，但会有响应式的问题，原地刷新数据字典去除来时空数组

第四种方法是使用计算属性来解决