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

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

ただいまの
回答率

89.51%

Vueのレンダリングで、HTMLを出力したい

解決済

回答 3

投稿

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

sigisyun

score 9

HTMLを出力するとき、v-htmlディレクティブを利用しています。
https://jp.vuejs.org/v2/guide/syntax.html
問題は、ループ処理の結果のレンダリングで、「"(ダブルクォート)」で囲まれたHTMLが出力されることです。
補足しますと、1回目のループでは正しくHTMLが出力されています。しかし、2回目以降では""で囲まれてしまっています。""で囲まれない状態で出力したいのですが、問題の所在が見つからないので質問いたします。何卒よろしくお願いします。

<section class="row postCard" v-for="post in getItems">
  <div class="col-3 col-md-4 posts-img-wrapper p-0">
    <img class="posts-thumbnail" :src="post.thumbnail_path">
  </div>
  <div class="col-9 col-md-7 offset-md-1 p-2">
    <router-link :to="{name:'postdetail', params:{postId:post.id}}">
      <h4 class="postTitle" v-html="post.title"></h4>
    </router-link>  ↓該当箇所
    <div class="d-md-block postContent" v-html="post.content"></div>
      <small class="put-right d-block">{{post.created_at}}</small>
    </div>
</section>


getItemには算出プロパティで計算された結果のオブジェクトが入っています。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

0

JS側の処理もみないと何とも言えないですね...
ダブルクォーテーションどこかに混入していませんか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/03/27 15:14

    ですよね。申し訳ありません。

    ダブルクォーテーションについて
    HTMLコード上にも、オブジェクトのそれぞれの要素についても混入していません!これだけ多くの方に見てもらえて、一般的な問題点がなさそうですと、おそらく私の初歩ミスかと思います。

    分析にご協力いただき本当に助かりました。ありがとうございます。

    キャンセル

  • 2020/03/27 15:19

    もしかすると、原因が特定できたかもしれません。。試してみます。

    キャンセル

  • 2020/03/27 15:38

    考えられることとしては、一回目はソースから直接出力されていて、二回目はブラウザ依存になっているからかもしれませんね。。
    お役に立てず申し訳ありません。

    キャンセル

  • 2020/03/27 15:55

    1回目が意図通り出力している件、謎でした。原因はループ回数のミスでした。。

    キャンセル

0

今回の問題
v-htmlによって生のHTMLを出力できない。
1回目は正しく表示されるが、2回目以降からは""で囲まれる状況でした。

解決策
値を出力する前に挟んでいる処理をすべての要素にかけた
解決策と言うとおこがましいレベルの初歩的ミスです・・・

ソースは示しておらず、ご解答者に負担をおかけしている状況ですが、出力前にそれぞれの要素にデコード処理をかけております。
そのデコード処理を全ての要素に適用できていなかったことが原因でした。具体的にはループ回数のミスです。。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

-1

せめて変数の内容とループのロジックくらいは書かないとダメでは?
ループ見落としました

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/03/26 23:07

    ご回答ありがとうございます!

    なんのこっちゃわからないですよね..
    申し訳ありません。

    Teratailに残ってご迷惑おかけしそうであれば質問ごと削除します。ありがとうございました。

    キャンセル

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

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