0

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

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

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

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

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

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

追記

2022/1/20

イメージとしては画像にあるような各投稿に付属しているクリックすると開閉するメニューです。
画像の説明をここに入力

1 件の回答 1

0

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

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

このプログラムの todos Arrayに相当するものを, PHPで指定するか
あるいは Fetch 利用して取得することになるでしょう

3
  • ありがとうございます。 該当の箇所確認しました。 <todo-item v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)" ></todo-item> 上記は該当のドキュメントのコードの一部ですが、v-for は <todo-item>コンポーネントの中でループを行ってその個数分を表示するという処理になると思います。 一方、私のしたいことを単純化した例を示すと、たとえば、<button>要素をループさせたいとして、 たとえば、<div><article><button>メニュー</button></article><article><button>メニュー</button></article></div> のようなHTMLだったとして、ループ対象の<button>同士の間にはそれぞれの親要素である<article>が存在しています。 このような場合<todo-item>コンポーネントの中に<article>までを含める必要があるということでしょうか? できれば<button>のみをコンポーネントにしたいと考えます
    – ryo
    2022年1月20日 12:03
  • それぞれの項目をコンポーネントにするなら, ユーザー名, 投稿内容, 〜 各種ボタンまですべてになるかもです。投稿内容に関するパーツとしてひとまとめに扱いたいすべての要素 (どの様に扱いたいか, 扱うべきなのか, の設計)
    – oriri
    2022年1月21日 7:56
  • まぁほぼボタンだけのコンポーネントにしたとしても, それが Web UIのパーツとして歪な形(まとまり)でないのなら構わないのでは
    – oriri
    2022年1月21日 8:02

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。