uniapp onload データをレンダリングできない場合はどうすればよいですか?

最近、uniapp を使用して小さなプログラム プロジェクトを開発していましたが、ページ上のデータをレンダリングできないという問題が発生しました。いくつかの調査と検討の後、最終的に解決策を見つけました。

質問

ページの onLoad ライフサイクル関数でデータを取得するリクエストを開始し、そのデータを data の属性に割り当て、テンプレートの属性をレンダリングに使用しました。しかし、問題が発生しました。対応するデータをテンプレートでレンダリングできませんでした。

まず、変数名のスペルミスやデータ型の不一致など、いくつかの一般的なエラーを排除しました。しかし、これらは問題を解決しませんでした。

解決策

データは取得前にレンダリングされる可能性があるため、onLoad ライフサイクル関数で直接レンダリングすることは現実的ではないことに気付きました。この問題に対処するために、いくつかの解決策を試しました:

1. コンポーネントの作成されたライフサイクル関数にデータ要求を配置します。

この方法は、作成されたライフサイクル関数内でデータ要求が非同期的に実行されるのに対し、レンダリング コンポーネントは同期的に実行され、データが取得される前にレンダリングされるため、基本的には実現できません。

2. ウォッチを使用してデータの変更を監視します。

この方法は私の実際の運用でも実現可能です。データの変化はウォッチを通じて監視されます。データが正常に取得されると、ウォッチ関数がトリガーされてレンダリングされます。

コード表示:

export default {
  data() {
    return {
      dataList: []
    }
  },
  watch: {
    dataList: function(val) {
      if (val.length > 0) {
        this.$nextTick(() => {
          //渲染组件的操作
        })
      }
    }
  },
  onLoad() {
    // 发起数据请求,并在成功后赋值给dataList
  }
}

ここで、データが正常に取得された後、Vue.nextTick メソッドを使用してコンポーネントをレンダリングする必要があることに注意してください。そうしないと、コンポーネントが完全にレンダリングされない可能性があります。レンダリングされました。

結論

uniapp では、onLoad ライフサイクル関数でデータを直接レンダリングすることは現実的ではありません。watch を使用してデータの変更を監視し、データが正常に取得された後にコンポーネントをレンダリングする必要があります。 。

以上がuniapp onload データをレンダリングできない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。