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; }
あなたの回答
tips
プレビュー