如何才能做到条件渲染？

Question

请教如何做到部分渲染，uniapp中，name是上一个页面传过来的数据再渲染的，其中有7个值，在同一个页面下的uni-popup组件中，有左右联动导航，item.name是name下的二级数据导航，其和右侧数据联动，那么如何做到比如当name=A，popup下的item.name只渲染A对象下的数组，其他的不出现，name=B，item.name只渲染B对象下的数组，谢谢

<view class="">{{name}}-></view>

{{item.name}}

循环渲染出来的右侧列表，和左侧item.name可联动

<view v-for="(v,i) in sortarr" :key="i">
<view v-for="(item,i) in v.grade2" :key="i">
<view class="title1,right_title" :id="'po'+i">{{item.name}}</view>
<view v-for="(item,j) in item.grade3" :key="j">
<text class="item">{{item.name}}</text>
</view>
</view>
</view>

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  解决方案：

  1. 在页面中通过 props 接收父组件传递的数据。

  props:{
    data:{
      type:Object,
      default(){
        return {}
      }
    }
  }
  

  1. 在 data 中定义需要根据传递进来的数据进行条件渲染的变量。

  data() {
    return {
      selectData: this.data,  // 根据传递进来的数据进行条件渲染的变量
      ...
    }
  }
  

  1. 在模板中进行条件渲染，将左侧导航的选项和右侧列表数据关联起来。

  <view v-for="(item,index) in navList" :key="index">
    <text>{{item.name}}</text>
    <view v-if="selectData === item.value">  // 根据传递进来的数据进行条件渲染
      <view v-for="(rightItem, rightIndex) in item.array" :key="rightIndex">
        <text>{{rightItem}}<text>
      </view>
    </view>
  </view>
  

  完整代码示例：

  <template>
    <div>
      <view v-for="(item,index) in navList" :key="index">
        <text>{{item.name}}</text>
        <view v-if="selectData === item.value">
          <view v-for="(rightItem, rightIndex) in item.array" :key="rightIndex">
            <text>{{rightItem}}</text>
          </view>
        </view>
      </view>
    </div>
  </template>
  <script>
    export default {
      props:{
        data:{
          type:Object,
          default(){
            return {}
          }
        }
      },
      data() {
        return {
          selectData: this.data,
          navList: [
            {name: "A", value: "A", array: ["A1", "A2"]},
            {name: "B", value: "B", array: ["B1", "B2"]}
          ]
        }
      }
    }
  </script>
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^