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

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

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

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

Q&A

0回答

696閲覧

v-forディレクティブ内でメソッドを繰り返して呼び出し、その繰り返し処理の結果を繰り返し毎に反映させたい

widget11

総合スコア221

Vue.js

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

0グッド

1クリップ

投稿2021/08/09 16:46

タイトルだとわかりづらくて恐縮です。

apiにリクエストして返ってきた結果dataをv-forディレクティブ内で繰り返し処理を行っています。
そのなかでdownload_each()というメソッドを呼び出しております。
このメソッドは引数のファイル名から画像のパスが返り値となって返ってきます。(firebase storageから画像をパスをreadしており、ファイル名は自作のapiからimage_nameというkeyで返ってきています)
その返り値をsrcに反映させ画像を表示したいのですが、うまくやり方が分からないです。

以下がソースコードです。

<v-card class="mx-auto" max-width="344" :key="user" v-for="user in this.data"> <v-img v-on="download_each(user.image_name)" :src="//ここにimageのパスを入れたい"></v-img> <v-card-title>{{user.nickname}}</v-card-title> </v-card> <script> import axios from 'axios'; import { download } from '../src/plugins/storage.js' export default { name: "top", data: function() { return{  data: null, uploadImageUrl: "", } }, mounted: async function(){ await axios .get('http://localhost:3000/') .then((response) => { this.data = response.data; }) .catch(error => { alert(error); }) }, methods: async function download_each(file_name){ let image = await download(file_name); } } </script>

特に分からないことが繰り返し処理の中で

methods: async function download_each(file_name){ await download(file_name); }

こう呼んだメソッドの返り値を

<v-img v-on="download_each(user.image_name)" :src="//ここにimageのパスを入れたい"></v-img>

このsrc内にどの様に持たせればいいかということです。
先んじて(v-forで展開する前)複数画像のフルパスを全て撮ってきて、配列(data)に付け加えた後、
datawおv-forで展開するということも考えたのですがもう少し簡単なやり方がないかと思い、質問しました。
ご回答いただけると幸いです。

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

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

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

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

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

FKM

2021/08/10 02:02

ループを用いない、通常での画像パスの呼び方はわかっていますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問