

現在、ユーザからの投稿の一覧を表示するページを作成しています。  
その投稿の1つ1つに「編集」「削除」などの選択肢が格納されているメニューを設置したいと考えています。  
そのメニューは各投稿の左下に設置されたボタンをクリックすることで開閉します。

メニュー自体は vue のコンポーネントで作成しています。

投稿が1つであればその要素に mount すればよいのですが、  
投稿は1つ以上存在するため、そのすべてに mount を行う必要があります。  
（100個あれば100個に mount を行う）

vue を学び始めてまだ日が浅いため、どうすればよいかほとんど見当がつきません。

バックエンドは PHP を使用していますが、foreach で投稿の個数分 mount すればよいでしょうか？  
その場合100であれば100回mount の行がJSファイルに出力されることになるが、通常そんな風に実装するものでしょうか・・・？

このような場合どうするか教えていただけないでしょうか。

## 追記

2022/1/20

イメージとしては画像にあるような各投稿に付属しているクリックすると開閉するメニューです。  
[![画像の説明をここに入力](https://i.stack.imgur.com/9CG0R.png)](https://i.stack.imgur.com/9CG0R.png)


CC BY-SA 4.0
2022-01-18T08:14:48.020
85776
2022-01-20T12:19:59.910
2022-01-20T12:19:59.910
50616
50616
question
javascript vue.js
vue 3 このような場合どのようにすれば実現できるでしょうか？


(v3.ja.vuejs.org) [リストレンダリング](https://v3.ja.vuejs.org/guide/list.html)
ページ内に「ToDo リスト」の例が載っています。

項目をコンポーネントとして定義し,  
`todo-item` コンポーネントのボタンを押すと, `$emit('remove')` により, `todos.splice(index, 1)`
が実行され, その項目が削除される仕組み。  
試しに動かしてみるとよいかもです。

このプログラムの `todos` Arrayに相当するものを, PHPで指定するか  
あるいは
[Fetch](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch)
利用して取得することになるでしょう


CC BY-SA 4.0
2022-01-18T14:06:19.453
85779
2022-01-18T14:06:19.453
43025
85776
answer