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

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

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

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

0回答

325閲覧

【Nuxt】画像選択機能を作りたい。

Tikka

総合スコア11

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2021/09/04 06:34

編集2021/09/04 06:37

axiosでAPI(laravel)から取得した画像をフォームで選択できる機能を作りたいです。

やったこと
vue-select-imageというライブラリを使って実装してみましたが画像のようにチェックボックスしか表示されません。
サンプルが表示されるのは確認済みです。
どこか間違っている点、細かい実装方法などを教えて頂けませんか?よろしくお願いします。
また、ライブラリを使わないやり方がありました教えていただけたら嬉しいです。
イメージ説明

該当のコード

<template> <vue-select-image :data-images="ArticleData.Manga_image" :is-multiple="true" @onselectimage="onSelectImage" > </vue-select-image> </template> <script> mport axios from 'axios'; export default { data(){ return { ArticleData: { Manga_image: [], }, isSelectedImage: [], initialSelected: [], }; }, methods: { getManga() { axios.get('http://xxxxxxxxxxxxx/api/feed', { params: { keyword: this.keyword, } }) .then(res => { this.ArticleData.Manga_image = res.data; console.log(this.ArticleData.Manga_image); }).catch(error => { console.log(error.responce); }) }, onSelectImage(selected){ let arr = []; for(let i=0; i<selected.length; i++){ arr.push("id:" + selected[i].id); } this.isSelectedImage = arr; } } } </script>

API(RakutenBooksAPIから漫画情報を取得しています)

<?php namespace App\Http\Controllers\Api; use App\Http\Controllers\Controller; use Illuminate\Http\Request; use RakutenRws_Client; use App\Models\Manga; class Mangafeedcontroller extends Controller { public function index(Request $request) { $keyword = $request->input('keyword'); if (!empty($keyword)) { $isKeyword = Manga::where('title', 'like', '%'.$keyword.'%')->first(); if (!isset($isKeyword)) { $RakutenUrl = "https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?applicationId=xxxxxxxxxxxxxxxxxxxxxxx&title={$keyword}&booksGenreId=001&size=9"; $opts = [ 'http' => [ 'method' => 'GET', 'header' => 'user-agent:MyUserAgent' ] ]; $json = file_get_contents($RakutenUrl, false, stream_context_create($opts)); $json_decode = json_decode($json, true); $res = []; foreach ($json_decode['Items'] as $item) { $title = $item['Item']['title']; $ImageUrl = $item['Item']['largeImageUrl']; $source_url = $item['Item']['itemUrl']; $res[] = [ 'title' => $title, 'ImageUrl' => $ImageUrl, 'itemUrl' => $source_url, ]; } // dd($res); // return $res; foreach ($res as $i) { $manga = new Manga; $manga->title = $i['title']; $manga->img_url = $i['ImageUrl']; $manga->source_url = $i['itemUrl']; $manga->save(); }; $getmanga = Manga::where('title', 'like', '%'.$keyword.'%')->get(); // dd($getmanga); foreach ($getmanga as $item) { $id = $item->id; $title = $item->title; $ImageUrl = $item->img_url; $source_url = $item->source_url; $result[] = [ 'id' => $id, 'title' => $title, 'ImageUrl' => $ImageUrl, 'source_url' => $source_url ]; }; // dd($result); return $result; }

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問