Laravel-vue:使用if / v-else显示不同的图标

Question

我需要有三个不同的图标基于数据库列“可见性”的值。

基本上，如果：

值"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>  

Answer 1

尝试使用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>

​