How to conditional disable a link with bind href in Vue.js?

Question

I have a project where will have an area dynamically populated with Vue.js.

But items should be clickable or not depending on the level of each item.

I know in Vue, you can use the v-if, but everything inside those tags goes away if it doesn’t match. I would like to use something similar but eliminating the clickable link without deleting what it contains within the tag.

For example:

I have something like this that should appear when the levels of the items are above 2:

<a v-bind:href="['http://meusite.com.br/' + opts.cod]">
   <div>CONTEUDO AQUI</div>
</a>

And I’d like it to stay that way if the item level is 1 or below:

   <div>CONTEUDO AQUI</div>

Or if you can’t remove the link tag, but you can undo it in the following way, it would also help:

<a href="#">
   <div>CONTEUDO AQUI</div>
</a>

I don’t know if I could explain it properly, I hope to understand.

Below is the code of what I’ve done so far.

    new Vue({
        el: '#v-for-lista',
        data: {
           itens: [{"cod":"xxxx1","nome":"Samanta Nivel 3","descricao":"Desc Teste 1","telprincipal":"","level":3},{"cod":"xxxxteste","nome":"Teste Nivel 1","descricao":"Este é nivel 1 e não deve ser clicável","telprincipal":"WhatsApp: [phone]","level":1}, {"cod":"xteste2x","nome":"Teste Nivel 2","descricao":"Teste continuando","telprincipal":"","level":2}]
        }
    });

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div class="container-fluid" id="v-for-lista">    
    <div class="carditem" v-for="(opts, key) in itens">
    	<a v-bind:href="['http://meusite.com.br/' + opts.cod]">
    		<div class="card" v-bind:class="['level-' + opts.level]">
    			<div class="header bg-level">
    				<h2>{{ opts.nome }}</h2>
    			</div>
    			<div class="list-group">
    				<li class="list-group-item">{{ opts.descricao }}</li>
    				<li class="list-group-item" v-if="opts.telprincipal">{{ opts.telprincipal }}</li>
    			</div>
    		</div>
    	</a>
    </div>
</div>

Thank you

Answer 1

You can use conditions within the bind. Ex: (condition ? if : Else)

In your case it would look like this:

<a v-bind:href="(opts.level >= 2 ? 'http://meusite.com.br/' + opts.cod : '#')">

Placed >= 2 to fetch items that are equal to or above 2.

This way you don’t delete the tag <a> but it’s like the example you asked for.

To remove the link tag, I think the ideal would be to create a component just like his friend Noobsaibot showed in his reply.

    new Vue({
        el: '#v-for-lista',
        data: {
           itens: [{"cod":"xxxx1","nome":"Samanta Nivel 3","descricao":"Desc Teste 1","telprincipal":"","level":3},{"cod":"xxxxteste","nome":"Teste Nivel 1","descricao":"Este é nivel 1 e não deve ser clicável","telprincipal":"WhatsApp: [phone]","level":1}, {"cod":"xteste2x","nome":"Teste Nivel 2","descricao":"Teste continuando","telprincipal":"","level":2}]
        }
    });

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div class="container-fluid" id="v-for-lista">    
    <div class="carditem" v-for="(opts, key) in itens">
    	<a v-bind:href="(opts.level >= 2 ? 'http://meusite.com.br/' + opts.cod : '#')">
    		<div class="card" v-bind:class="['level-' + opts.level]">
    			<div class="header bg-level">
    				<h2>{{ opts.nome }}</h2>
    			</div>
    			<div class="list-group">
    				<li class="list-group-item">{{ opts.descricao }}</li>
    				<li class="list-group-item" v-if="opts.telprincipal">{{ opts.telprincipal }}</li>
    			</div>
    		</div>
    	</a>
    </div>
</div>

Answer 2

You can use a dynamic v-bind, I did that example.

<div id="app">
  <a v-for="item in itens" v-text="item.nome"v-bind="formatBind(item.level)"></a>
</div>


 new Vue({
   el: '#app',
   data: () => ({
   itens: [
  {
    "cod": "xxxx1",
    "nome": "Samanta Nivel 3",
    "descricao": "Desc Teste 1",
    "telprincipal": "",
    "level": 3
  },
  {
    "cod": "xxxxteste",
    "nome": "Teste Nivel 1",
    "descricao": "Este é nivel 1 e não deve ser clicável",
    "telprincipal": "WhatsApp: [phone]",
    "level": 1
  },
  {
    "cod": "xteste2x",
    "nome": "Teste Nivel 2",
    "descricao": "Teste continuando",
    "telprincipal": "",
    "level": 2
  }
]
}),
methods: {
  formatBind(level){

    if(level === 1){
      return {}
    }

    return {
      href: 'stackoverflow.com'
    }

  }
}
})