uniapp 二级导航渲染的问题

Question

我有一个一级导航是“选择城市”（有调用位置接口，例如获取到的城市，长沙） 二级导航是 “选择类型” 默认是类型1（选择类型是根据获取到的城市再通过数据库返回类型） 然后下边渲染页面，

如何然后给这个页面给上初始值？
意思就是说 长沙-类型1-页面，

目前我使用computed筛选数据数组 发现一开始即使获取到了城市（调用返回）也不会自动调用这个computed只有点击城市或二级导航时才会根据所点击的按钮筛选，

这就造成一个问题、调用的接口返回的城市和类型 即时是有值但是页面显示是空的，当点击时才会计算渲染，

请问我该怎么从后台获取的数据一开始就附上初始数据渲染页面？
watch监听是否也可以？能有代码参考吗？

或许我上边所说的思路是错的，不应该这样，我的目的是想一次性获取到城市数据然后渲染这样提升一下性能而不用每次调用数据库，所以才使用computed 但是他并不会自动调用，有什么好的解决办法？

从后台数据返回 rentlists 
html
<view class="contentInfo" @click='goContent' v-for="(item,index) in rentData" :key="index" />

computed

            rentData: function() {
                let that=this;
                return that.rentlists.filter(function(item) {
                     // console.log(that)
                      if(that.theCity=="xx市区"){
                           // if(that.cityShow=false){
                               
                            return item.homeType== that.navMain
                           // }
                           
                      }else{
                          return item.city!="xx市" && item.homeType== that.navMain
                      }
                })
            },

点击后

此时并没有任何数据 当点击后才有 请问我该如何修改？即页面一开始就显示当前选项的值

Answer 1

该回答引用ChatGPT

如果你希望页面一开始就显示获取到的城市和类型的数据，而不是需要用户手动点击才能显示，则你可以在页面初始化的时候，手动调用一次筛选数据的computed属性。

你可以在页面的created或者mounted钩子函数中手动调用computed属性，以便初始化数据的渲染。

例如：

created() {
  this.rentData // 手动调用computed属性
}
或者

javascript
Copy code
mounted() {
  this.rentData // 手动调用computed属性
}

这样，当页面初始化完成后，就会立即调用computed属性，筛选数据并渲染页面。

如果你希望在获取到城市和类型数据后自动更新页面，你可以使用watch监听城市和类型的变化，并在变化后手动调用computed属性。

例如：

watch: {
  theCity: function(newVal, oldVal) {
    this.rentData // 手动调用computed属性
  },
  navMain: function(newVal, oldVal) {
    this.rentData // 手动调用computed属性
  }
}

这样，当城市或类型发生变化时，watch就会被触发，然后手动调用computed属性，重新筛选数据并渲染页面。