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

Question

前提・実現したいこと

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

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

Answer 1

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

例えば

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

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

Comments

[mikkame]

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

[yuta0408]

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

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