V-If dependent on a V-For - html

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>