时间戳

首页 > 解决方案 > Laravel-vue：用 if / v-else 显示不同的图标

laravel - Laravel-vue：用 if / v-else 显示不同的图标

问题描述

我需要根据 db 列“可见性”的值具有三个不同的图标。

基本上如果：

值“1” - only_me（必须显示图标）

值“2” - team_members（正确显示成员头像）

值“3” - 组织（必须显示另一个图标）

目前，值“2”有效，而值“1”和“3”始终显示与值 1 相同的图标。

我究竟做错了什么？这是不起作用的代码：

                                    <div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-if="project.team_members.length && project.visibility === '2'">
                                        <div class="avatar-group">
                                            <img v-for="user in project.team_members" class="avatar avatar-xs" :src="user.avatar_url" :alt="user.name" :title="user.name"/>
                                        </div>   
                                    </div>
                                    <div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-if="project.visibility === '1'">
                                        <div class="avatar-group">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#52525B" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><rect x="40" y="88" width="176" height="128" rx="8" stroke-width="16" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M92,88V52a36,36,0,0,1,72,0V88" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="128" cy="152" r="12"></circle></svg>
                                        </div>
                                    </div>
                                    <div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-if="project.visibility === '3'">
                                        <div class="avatar-group">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#52525B" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M40,114.66667V56a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v58.66667c0,84.01533-71.306,111.85016-85.5438,116.57058a7.54755,7.54755,0,0,1-4.9124,0C111.306,226.51683,40,198.682,40,114.66667Z" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><polyline points="202.402 172.082 128 120 53.597 172.082" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>                                            </div>
                                    </div>

标签： laravelvue.js

解决方案

v-if改为尝试v-else-if：

new Vue({
  el: '#demo',
  data() {
    return {
      project: {visibility: 2, team_members: [{avatar_url: 'https://gravatar.com/avatar/230a4e2ebaa0ad88fdc513bbfa31ef34?s=40&d=monsterid&r=x', name: 'qqq'}, {avatar_url: 'https://gravatar.com/avatar/230a4e2ebaa0ad88fdc513bbfa31ef34?s=40&d=robohash&r=x', name: 'aaa'}],}
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="demo">
  <input type="number" min="1" max="3" v-model="project.visibility" />
  <div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-if="project.team_members.length && Number(project.visibility) === 2">
    <div class="avatar-group">
      <img v-for="user in project.team_members" class="avatar avatar-xs" :src="user.avatar_url" :alt="user.name" :title="user.name"/>
    </div>   
  </div>
  <div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-if="Number(project.visibility) === 1">
    <div class="avatar-group">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#52525B" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><rect x="40" y="88" width="176" height="128" rx="8" stroke-width="16" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M92,88V52a36,36,0,0,1,72,0V88" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><circle cx="128" cy="152" r="12"></circle></svg>
    </div>
  </div>
  <div class="mt-4 flex-shrink-0 flex items-center sm:mt-0" v-if="Number(project.visibility) === 3">
    <div class="avatar-group">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#52525B" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M40,114.66667V56a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v58.66667c0,84.01533-71.306,111.85016-85.5438,116.57058a7.54755,7.54755,0,0,1-4.9124,0C111.306,226.51683,40,198.682,40,114.66667Z" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><polyline points="202.402 172.082 128 120 53.597 172.082" fill="none" stroke="#52525B" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>                                            
    </div>
  </div>  
</div>

推荐阅读