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

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

ただいまの
回答率

88.38%

【laravel & vue.js】bladeテンプレート内で記述したvueコンポーネントが正しく表示されない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 409

yuta0408

score 9

前提・実現したいこと

Googleニュースからデータを取ってきて、ニュースの一覧画面を表示したい。laravel & vue.jsを使用しています。

具体的には、
・Googleニュースから取ってきたデータを配列に格納し、view(blade)に渡す。
・bladeテンプレート内のvueコンポーネントにその配列を渡して表示する。
を行おうとしています。

発生している問題

blade内で使用しているvueコンポーネントが正しく表示されません。具体的には、下記のようにvueコンポーネントが展開されず、そのまま表示されてしまいます(各属性の値はたまたま取れたニュースのデータです)。

<news-article-component :title="トレードに「正しさ」はいらない - みんなの仮想通貨" :link="https://cc.minkabu.jp/column/1283" :description="<a href=&quot;https://cc.minkabu.jp/column/1283&quot; target=&quot;_blank&quot;>トレードに「正しさ」はいらない</a>&amp;nbsp;&amp;nbsp;<font color=&quot;#6f6f6f&quot;>みんなの仮想通貨</font><p>パパ山根仮想通貨トレード日記(162)FXトレード歴10年。空いてる時間は三男(1歳)の育児にすべて注ぎ込む「イクメントレーダー」。 自身が開発したトレードシス.</p>" :pub-date=" Fri, 09 Aug 2019 04:02:54 GMT">
          </news-article-component>

該当のソースコード

SampleController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SampleController extends Controller
{
    //関連ニュース表示画面
    public function showNews()
    {
        function get_news($search_word)
        {
            $query = urlencode(mb_convert_encoding($search_word, "UTF-8","ASCII,JIS,UTF-8,EUC-JP,SJIS"));
            $res = simplexml_load_file("https://news.google.com/rss/search?q=${query}&hl=ja&gl=JP&ceid=JP:ja");
            if($res->channel->item) {
                $sample_news = [];
                $count = 0;
                foreach($res->channel->item as $item) {
                    $sample_news[$count]["title"] = (string)$item->title;
                    $sample_news[$count]["link"] = (string)$item->link;
                    $sample_news[$count]["pubDate"] = (string)$item->pubDate;
                    $sample_news[$count]["description"] = (string)$item->description;
                    $count++;
                }
            }
            return $sample_news;
        }
        $articles = get_news("検索したいワード");
        return view('sample.news', compact('articles'));
    }
}


news.blade.php

@extends('layouts.base')

@section('content')
<div class="u-container">
  <div class="u-content-wrap">
    <section class="p-news">
      <h2 class="p-news__title">
        News
      </h2>
      <ul class="p-news__list">
      @foreach ($articles as $article)
        <li id="app" class="p-news__item">
          <news-article-component
            :title="{{ $article['title'] }}"
            :link="{{ $article['link'] }}"
            :description="{{ $article['description'] }}"
            :pub-date=" {{ $article['pubDate'] }}">
          </news-article-component>
        </li>
      @endforeach
      </ul>
    </section>
  </div>
</div>
@endsection


なお、vueコンポーネントの属性を削除し、<news-article-component></news-article-component>とすると、vueコンポーネントの内容が表示されるようになります。

NewsArticleComponent.vue

<template>
  <article class="c-article">
    <div class="c-article__text-wrap">
      <h3 class="c-article__title">{{ title }}</h3>
      <p class="c-article__excerpt">{{ description }}</p>
      <p class="c-article__date">{{ pubDate }}</p>
    </div>
    <div class="c-article__img-wrap">
      <img src="../../img/coin_bg.jpg" alt="" class="c-article__img" />
    </div>
  </article>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    link: {
      type: String
    },
    description: {
      type: String
    },
    pubDate: {
      type: String
    }
  }
};
</script>

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

Laravel:5.8
vue:2.5.17

単純な所の書き間違いなどではないかと思うのですが、煮詰まってきたため、お力を貸して頂けると大変助かります。
よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

Vueの学習、Laraavelの学習はそれぞれお済みでしょうか?
同時に勉強し、こんがらがってしまっているように思えます。

例えば

:title="トレードに「正しさ」はいらない - みんなの仮想通貨"

これは、Vue側でdataのトレードに「正しさ」はいらない - みんなの仮想通貨プロパティを取得するという意味となります。
:hogehogeはv-bindの短縮系かと思いますが、これは、直接値を指定するものではありません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/12 18:39

    まずはVueだけで勉強した方が捗るのでは、と思います

    キャンセル

  • 2019/08/12 19:32 編集

    早速ご回答いただき、ありがとうございます。
    それぞれ、":"を削除した所上手く表示されました。

    また、ご助言もありがとうございます。Laravel習得が主目的で進めていましたが、途中でVueコンポーネントを使いたい誘惑に負けて寄り道してしまいました。おっしゃる通りで、欲張りすぎたかと思いますので、絞って進めたいと思います。ありがとうございました。

    キャンセル

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

  • ただいまの回答率 88.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る