Search code examples
stringvalidationvuejs2is-empty

Vue2 v-show validate empty strings in a loop


How do I validate inside of a loop with v-show empty items with vuejs2. I was trying the following but without any results

<div v-for="user in $store.state.users.data">
   <ul>
       <li v-show="user.mobil !== null ||  user.mobil !== ''" >
              <a v-bind:href="'tel://' + user.mobil"> <i class="fa fa-mobile-phone"></i> <span>{{ user.mobil }} </span></a>
       </li>
   </ul>
</div>

enter image description here


Solution

  • Compare like v-show="user.mobil":

    new Vue({
      el: '#app',
      data: {
        users: [{
            mobil: '123',
            name: 'Foo'
          },
          {
            mobil: '',
            name: 'Bar'
          },
          {
            mobil: null,
            name: 'Baz'
          },
        ]
      }
    })
    <script src="https://unpkg.com/vue"></script>
    
    <div id="app">
      <div v-for="user in users">
        <ul>
          <li v-show="user.mobil">
            {{user.name}}
          </li>
        </ul>
      </div>
    </div>