0
<template v-for="d in data" >
     <a :key="d.id" class="zone{{d.value}}" href="{{d.code}}" >{{d.name}}</a>
</template>

Este exemplo simplesmente não funciona, como eu posso passar os valores que então dentro de "d" para o atributos? Como resolvo esse impasse?

1 Resposta 1

0

Não entendi muito bem a dúvida, porém creio que o problema é na maneira que você está utilizando a interpolação.

A interpolação "{{}}" é utilizada apenas entre as tags, e não dentro delas, referenciando suas variáveis que estão dentro de computed ou de seu data ().

No caso, em uma tag dentro de um atributo não é utilizado a interpolação, e sim o v-bind: ou os dois pontos ":", que é exatamente igual ao v-bind, porém em uma forma mais curta de utilizá-lo.

Seu código no caso creio eu que ficaria assim:

<template v-for="d in data" >
     <a :key="d.id" class="zone" :class="d.value" :href="d.code" >{{ d.name }}</a>
</template>

Só não entendi muito bem o que você quis fazer exatamente no caso do atributo class, portanto presumi que a classe zone é estática, e o d.value será outra classe dinâmica, mediante ao valor da variável.

Neste caso não tem problema de ter dois atributos class em uma tag, o Vuejs irá realizar um merge de todas as classes automaticamente, das dinâmicas com as estáticas.

4
  • 1
    Era exatamente isso minha dúvida, meu erro era que eu não estava usando o v-bind. Quanto a class, era pra resultar em tipo class="zone1" mas vi que também pode ser usando assim :class="'zone'+d.value". gostei da dica do agrupamento de classes, isso vai ser muito útil. 2/05/2018 às 10:37
  • Uma outra coisa que reparei agora, o :key que você está colocando na tag <a> provavelmente está incorreto. Ele é para ser utilizado na mesma tag do v-for. No caso, como o v-for é um template você não vai conseguir utilizá-lo, assim pode até mesmo remover da tag <a>, mas se fosse em uma <div> por exemplo, é aconselhável a por mesmo, mas aí você coloca na própria <div> que está realizando o v-for. 2/05/2018 às 15:02
  • Na verdade, esta :key só esta ai por exigência do próprio vuejs2. o eslint-plugin-vue reclama que agora é recomendado o uso do v-bind:key ao fazer laços com v-for, porem se eu retirar, o código funciona do mesmo jeito. 2/05/2018 às 23:12
  • Então, mas o que eu tava querendo dizer é que tem mesmo, só que tem que ser na mesma tag do v-for, e não as de dentro dela.. mas ok. 2/05/2018 às 23:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .