Vue Apply different CSS when pinned = 1-CodePudding

I'm trying to change the stylings for blogposts which are pinned. I have written some code that works A LITTLE (not as intended). So here's the code that works a little bit:

HTML: Problem here is that it posts ALL titles in every single post (but the titles of the posts that were pinned, get the styling)

    <div >
      <div >
        <div  v-for="(post, index) in collection" :key="index" :post="post" :index="index">
          <div >

            <img :src= post.image  alt="Card image cap" style="object-fit: cover;">

            <div >
              <div >
                <div v-bind: v-for="(post, index) in posts" :key="index">
                  <h3 >{{ post.title }}</h3></div>
                
                <p  onclick="RevealHiddenOverflow(this)" style="text-align: left">
                    {{ post.fullText }}</p>

                <div  role="group" aria-label="btn">
                  <button type="button"  data-toggle="modal" data-target="#readPost" v-on:click="readPost(post, index)">Show</button>
                  <button type="button"  data-toggle="modal" data-target="#editPost" v-on:click="editPost(post, index)">Edit</button>
                  <button type="button"  v-on:click="deletePost(post)">Delete</button>
                </div>        

              </div>
              
              <div >
                <p >{{ post.tags }}</p>
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>

JavaScript/Vue

new Vue({
  el: "#app",
  data() {
    return {
      header: "My BookWriting Tool",
      post: {},
      index: 0,
      newPost: {},
      newComment: [],
      readingPost: {},
      perPage: 9,
      pagination: {},
      pinned: 0,
      //pinned: null,
      posts: []
    };
  },
...

I can say that posts work as follows:

posts: [
  {"id":4,"title":"4 pinned","pinned":true},
  {"id":5,"title":"5","pinned":false},
  {"id":3,"image":"https://picsum.photos/350/250?random=3","title":"Third","fullText":"Only truncates when text is longer than 2 lines. :)","pinned":false},
  {"id":2,"image":"https://picsum.photos/350/450?random=2","title":"Second","fullText":"Second post, not gonna add much. Second post, not gonna add much. Second post, not gonna add much. Second post, not gonna add much. Second post, not gonna add much. Second post, not gonna add much. ","tags":"second, tag","pinned":false},
  {"id":1,"image":"https://picsum.photos/430?random=1","title":"First","fullText":"First one okay. First one okay. First one okay. First one okay. First one okay. First one okay. First one okay. First one okay. ","tags":"first, tag, echo"}
]

CodePudding user response：

This works :)

<div :>
<h3 >{{ post.title }}</h3></div>

WORKS!