V-If 依赖于 V-For

Question

我对这段代码在哪里需要模板标签感到困惑。最初我没有模板，我的 v-ifs 也没有加载。我将它们添加进去以查看它是否可以修复它但没有运气。奇怪的是，我的底部 v-if 带有删除按钮似乎有效。所有数据似乎都已正确初始化。我看到有人使用计算数据部分，但由于每个 post 条目都被渲染，所以这似乎不是正确的方法。

  <!-- 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>

另外，我的图标“fa fa-thumbs-down”有效，但我的“fa fa-thumbs-o-down”不起作用，知道为什么吗？

Answer 1

Check you version of font awesome fa fa-thumbs-o-down 适用于 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>

V-If 依赖于 V-For

V-If dependent on a V-For

html

vue.js

bulma

vuejs3