V-If dependent on a V-For

Question

I am confused on where I need template tags for this code. Originally I had no templates and my v-ifs didn't load. I added them in to see if it would fix it but had no luck. Weirdly my bottom v-if with the delete button seems to work. All the data seems to be correctly initialized. I saw people using the computed data section but since every post entry is rendered it seems like not the correct way to do this.

  <!-- and now the posts -->
  <div class="container block">
    <template v-for="post in posts">
      <div class="notification mb-4">
        <h1><strong>{{post.content}}</strong></h1>
        <h2><small>{{post.name}}</small></h2>
        <!-- Delete Icon -->
        <div class="columns">
          <div class="column is-11">
            <!-- Thumbs stuff -->
            <span class="button inverted is-light icon is-medium has-text-info" @click="rating_up(post._idx)" @mouseover="post_over(post._idx, true)" @mouseout="post_out(post._idx)">
              <template v-if="post.rating === 1">
                <!-- Filled in -->
                <i class="fa fa-thumbs-up"></i>
              </template>
              <template v-if="post.rating === 0">
                <!-- Not filled in -->
                <i class="fa fa-thumbs-o-up"></i>
              </template>
            </span>
            <span class="button inverted is-light icon is-medium has-text-info" @click="rating_down(post._idx)" @mouseover="post_over(post._idx, false)" @mouseout="post_out(post._idx)">
              <template v-if="post.rating === -1">
                <!-- Filled in -->
                <i class="fa fa-thumbs-down"></i>
              </template>
              <template v-if="post.rating === 0">
                <!-- Not filled in -->
                <i class="fa fa-thumbs-o-down"></i>
              </template>
            </span>
            <template v-if="post.show_likers">
              <span class="is_link">Liked by</span>
            </template>
            <template v-if="post.show_dislikers">
              <span class="is_link">Disliked by</span>
            </template> 
          </div>
          <div class="column">
            <div v-if="post.owner" class="container block">
              <span class="button inverted is-light icon is-medium has-text-danger" @click="delete_post(post._idx)">
                <i class="fa fa-trash"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>

Also my icons that are "fa fa-thumbs-down" work but my "fa fa-thumbs-o-down" do not work, any idea why?

Answer 1

Chack you version of font awesome fa fa-thumbs-o-down is for 4:

const app = Vue.createApp({
  data() {
    return {
      posts: [{_idx: 1, content: 'bbb', name: 'BBB', rating: 0, show_likers: 8, show_dislikers: 2, owner: 'www'}]
    };
  },
  methods: {
    post_over(id) {},
    post_out(id) {}
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
  <div class="container block">
    <template v-for="(post, i) in posts" :key="i">
      <div class="notification mb-4">
        <h1><strong>{{post.content}}</strong></h1>
        <h2><small>{{post.name}}</small></h2>
        <!-- Delete Icon -->
        <div class="columns">
          <div class="column is-11">
            <!-- Thumbs stuff -->
            <span class="button inverted is-light icon is-medium has-text-info" @click="rating_up(post._idx)" @mouseover="post_over(post._idx, true)" @mouseout="post_out(post._idx)">
              <template v-if="post.rating === 1">
                <!-- Filled in -->
                <i class="fa fa-thumbs-up"></i>
              </template>
              <template v-if="post.rating === 0">
                <!-- Not filled in -->
                <i class="fa fa-thumbs-o-up"></i>
              </template>
            </span>
            <span class="button inverted is-light icon is-medium has-text-info" @click="rating_down(post._idx)" @mouseover="post_over(post._idx, false)" @mouseout="post_out(post._idx)">
              <template v-if="post.rating === -1">
                <!-- Filled in -->
                <i class="fa fa-thumbs-down"></i>
              </template>
              <template v-if="post.rating === 0">
                <!-- Not filled in -->
                <i class="fa fa-thumbs-o-down"></i>
              </template>
            </span>
            <template v-if="post.show_likers">
              <span class="is_link">Liked by</span>
            </template>
            <template v-if="post.show_dislikers">
              <span class="is_link">Disliked by</span>
            </template> 
          </div>
          <div class="column">
            <div v-if="post.owner" class="container block">
              <span class="button inverted is-light icon is-medium has-text-danger" @click="delete_post(post._idx)">
                <i class="fa fa-trash"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</div>