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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

727閲覧

ページにアクセスしたときにお勧めを表示したい。(jsonから取得し、Vue.jsで表示)

Jetson_Pose

総合スコア1

Vue.js

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/14 06:45

編集2020/07/14 14:00

前提・実現したいこと

Vue.jsでお勧めを表示するページを作りたいです。

発生している問題・エラーメッセージ

うまく表示できない

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Cakes!</title> 6 <link rel="stylesheet" href="Cakes.css" /> 7 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> 8 <script src="cakes.js"></script> 9 </head> 10 <body> 11 <div id="cakesApp"> 12 13 <div class="searchArea"> 14 <img class="logo" src="logo.png"> 15 <div class="space"></div> 16 <input class="searchBox" type="text" v-model="input"> 17 <button type="button" v-on:click="searchCakeByName">検索</button> 18 </div> 19 20 <div class="dispArea" v-if="recommend.show == false"> 21 <div class="cake" v-for="cake in cakes" v-bind:key="cake.id"> 22 <p class="cakeTitle">{{ cake.title }}</p> 23 <img class="cakeImage" v-bind:src="cake.image"> 24 </div> 25 </div> 26 27 <div class="topArea" v-if="recommend.show == true"> 28 <h3>今週のお勧め</h3> 29 <div class="cake" v-for="cake in cakes" v-bind:key="cake.id"> 30 <p class="cakeTitle">{{ cake.title }}</p> 31 <img class="cakeImage" v-bind:src="cake.image"> 32 <p class="cakeExplan">{{ cake.explanation }}</p> 33 </div> 34 </div> 35 36 </div> 37 </body> 38</html> 39

javascript

1window.onload = Main; 2 3let cakesApp; 4const baseURL = "http://localhost:3000/cakes"; 5 6function Main() { 7 cakesApp = new Vue({ 8 el: "#cakesApp", 9 data: { 10 input: "", 11 recommend: { 12 recommend.show: true; 13 } 14 }, 15 cakes: [] 16 }, 17 methods: { 18 searchCakeByName: function(event) { 19 let url = "?title_like=" + this.input; 20 url = baseURL + encodeURI(url); 21 updateData(url); 22 } 23 }, 24 mounted: function(event) { 25 updateData(baseURL); 26 } 27 }); 28} 29 30function updateData(url) { 31 fetch(url, { method: 'GET' }) 32 .then(function(response) { 33 return response.json(); 34 }) 35 .then(function(res) { 36 if(Array.isArray(res)) { 37 cakesApp.cakes = res; 38 console.log(cakesApp.cakes); 39 } 40 else { 41 cakesApp.cakes = [res]; 42 } 43 }); 44} 45

json

1{ 2 "cakes": [ 3 { 4 "id": 1, 5 "title": "アイス01", 6 "image": "images/ice1.jpg", 7 "recommend": "true", 8 9 }, 10 { 11 "id": 2, 12 "title": "アイス02", 13 "image": "images/ice2.jpg", 14 "recommend": "false", 15 16 }

試したこと

v-ifの使い方などを調べましたが解決できずに質問しました。
https://jp.vuejs.org/v2/guide/conditional.html

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

自己解決

javascriptのコードを以下のように書き換えたらうまくできました。

recommend: {
show: true
},

mounted: function(event) {
let url = "?recommend_like=" + "true";
url = baseURL + encodeURI(url);
updateData(url);
}

投稿2020/07/14 13:56

Jetson_Pose

総合スコア1

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問