質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

8544閲覧

【Vue.js】子コンポーネントのmounted後に処理を実行したい

manape

総合スコア12

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

1グッド

1クリップ

投稿2021/02/17 13:54

編集2021/02/22 20:59

Vue.js及びJavaScript初心者です。実現したいことはなんとか形にはなったのですが、全く良い書き方とは思えず、潜在的な問題もあるかもしれません…。より効率的であったり、スマートな書き方があればご教示いただければ幸いです。

前提・実現したいこと

使用言語:Vue.js(2系), vue-router(v3.5.1)

2つのviewをタブで切り替えるWEBサイトを作っています。
どちらのviewも、Intersection Observer APIを用いて無限スクロールを実装しています。
さらに、無限スクロールで表示させるコンテンツは、各view共通の子コンポーネントを読み込んでいます。

このcreateObserver()という処理を、子コンポーネントである各コンテンツがmounted(createdでも可能?)された後に実行したいと思います。現状は、紆余曲折を経て、単純に500ms後に関数を呼び出すことで実現したい挙動はなんとかできています。。

// 親コンポーネント(view) <template> <div> 〜〜中略〜〜 <Post v-for="post in posts" :key="post.name" ></Post> </div> </template> <script> import Post from "../components/Post"; import { createObserver } from '../js/intersectionObserver'; export default { 〜〜中略〜〜 mounted() { setTimeout(() => { createObserver(); }, 500); }, 〜〜中略〜〜 } </script>

発生している問題・解決したいこと

この「500ms後に処理をする」という書き方よりも良い方法について、お知恵を貸していただきたいです。
この場合ですと、例えば通信環境が悪く読み込みに時間がかかっている場合などは期待する挙動にならないのではと思っています。

試したこと

  • 初めsetTimeoutのmsを100msにしたところ、40%くらいの確率で望む挙動になり運頼みという不安定な状態でした。。現状なんの根拠もなく500msに設定しているので、それも良いのかわかりません。
  • 非同期処理だ、と聞きかじった知識で思い浮かびはしたものの、子コンポーネントがmountedになったらという状態をどう取得し活用できるかも見当がつかず、試せていません。

わかりづらい点があれば恐縮ですが、何卒ご教授のほど宜しくお願いいたします!

解決方法

  1. $emitを使った方法
// 子 mounted() { this.$emit('is-post-mounted'); }, // 親 <Post @is-post-mounted="childDOMMounted"></Post> ~~ methods: { childDOMMounted() { createObserver(); } }
  1. $nextTickを使った方法
// 子 mounted() { this.$nextTick(() => { createObserver(); }) }
yamada_yuuki👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

親のmountedにnextTick入れるだけで対応できるかもしれません。
Lotus Base

親子でemitを使えばほぼ確実に実現できます。
vue.jsで子から親コンポーネントにデータを渡す方法 | Code Pocket

propSyncやwatchでもいいかもしれません。
一応公式サイトには全て載っています。
API — Vue.js

投稿2021/02/17 14:25

szk.

総合スコア1400

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

manape

2021/02/17 23:55

URL付きでご回答ありがとうございます!! emitで試してみたところ、実現できました! 他の方法でも試してみて結果もご共有したいので、他のリンクも拝見させていただきます????‍♀️
manape

2021/02/22 20:56

子のmountedにnextTick入れることでもできました! $emitですと親子どちらにも処理を記述しなければいけなかったですが、nextTickの場合子の方に書くだけで良くなりコードも簡潔になりました。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問