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

Question

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には算出プロパティで計算された結果のオブジェクトが入っています。

Answer 1

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

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

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

Answer 2

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

Comments

[sigisyun]

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

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

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

[sigisyun]

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

[minrara]

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

[sigisyun]

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

Answer 3

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

Comments

[sigisyun]

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

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

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