How to disable a bind conditionally with bind href in vue.js?

Navigation
3

I have a project where you will have a dynamically populated area with vue.js.

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

I know that in vue, you can use v-if , but everything inside these tags disappear if it does not match. I'd like to use something similar but deleting the clickable link without deleting what it contains inside the tag.

For example:

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

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

I would like it to look like this, if the item level is 1 or below: 

   <div>CONTEUDO AQUI</div>

Or if you can not remove the link tag, but you can unsubscribe as follows, it would also help: 

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

I do not know if I could explain it right, I hope you understand.

Below is the code 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: (11) 99999-9999","level":1}, {"cod":"xteste2x","nome":"Teste Nivel 2","descricao":"Teste continuando","telprincipal":"","level":2}]
        }
    });
<script src="https://cdn.jsdelivr.net/npm/vue"></script><divclass="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 ♥

    
asked by anonymous 08.11.2018 / 00:18

2 answers

3

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 : '#')">

I've placed > = 2 for it to fetch items that equal 2 or above.

This way you do not delete the <a> tag, but it will look like the example you requested.

To get the link tag, I think it would be ideal to create a component just like the friend NoobSaibot showed in his response. 

    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: (11) 99999-9999","level":1}, {"cod":"xteste2x","nome":"Teste Nivel 2","descricao":"Teste continuando","telprincipal":"","level":2}]
        }
    });
<script src="https://cdn.jsdelivr.net/npm/vue"></script><divclass="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>
    
08.11.2018 / 17:37
0

You can use a dynamic v-bind, I did this 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: (11) 99999-9999",
    "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'
    }

  }
}
})
    
08.11.2018 / 13:08
Using CTE (Common Table Expression) creates a type of "cache" in the database? CSS Problem with borders and placement of list elements