Vue.js 3 構成 API を使用して、コンポーネントが表示されたときにイベントをトリガーします
P粉032900484
2023-08-28 23:40:07
<p>アプリケーションには、ボタンと変数を介して表示/非表示を切り替えるコンポーネントがいくつかあります。たとえば、v-show="variable"、ボタンはこれらの変数を true/false に設定するだけで、Web 用にこれらのコンポーネントを処理します。 Web サイトを別のページで閲覧するのと同じように。私が欲しいのは、コンポーネントがページに表示されているときに関数を呼び出す方法です。たとえば、ランダムに 2 人のプレイヤーを選択してゲームを開始したいとします。ゲームボードが表示されると、プレイヤーが 2 人の場合にのみメッセージまたは警告が表示されます。重要なのは、そのインスタンスでイベントが発生したことです。以前はありませんでした。私のアイデアは、コンポーネントのスクリプト部分に関数を含めることです。 </p>
<pre class="brush:php;toolbar:false;">function something() {alert("hello"); }</pre>
<p>次に、次のように言う方法を見つけます。</p>
<pre class="brush:php;toolbar:false;">コンポーネント表示時 -> if (player == 2) { something(); }</pre>
<p>私に足りないのは、「コンポーネントが表示されるとき」の部分をどのように判断して処理するかです。私にとって、最も適切なロジックは、onMounted、onRendered (開発環境でのみ機能すると読みました)、および onActivated を使用することのようですが、それらは適切に/まったく機能していないようです。 </p>
###私は方法を発見しました。問題は、これが
onMounted
と
v-ifと組み合わされていることです。
v-showの代わりに
v-ifを使用できるかどうかを確認するためにコードをチェックしていましたが、意図的に
v-showを使用することを選択したことを覚えています。私のコンポーネントを処理しますが、この場合は変更しても問題ないかもしれません。