Como resolver a interpolação dentro dos atributos foi removido. Usar v-bind ou a abreviação de dois pontos? Vue.JS 2


92

Meu componente vue é assim:

    <template>
        <div>
            <div class="panel-group" v-for="item in list">
                ...
                <div class="panel-body">
                    <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
                        Show
                    </a>
                </div>
                <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
                ...
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            ...
            computed: {
                list: function() {
                    return this.$store.state.transaction.list
                },
                ...
            }
        }
    </script>

Quando executado, existe um erro como este:

Erro de sintaxe do modelo Vue:

id = "compra - {{item.id}}": A interpolação dentro dos atributos foi removida. Use v-bind ou a abreviação de dois pontos.

Como posso resolver isso?

Respostas:


179

Use o código javascript v-bind(ou atalho ":"):

:href="'#purchase-' + item.id"

e

:id="'purchase-' + item.id"

Ou se estiver usando ES6 +:

:id="`purchase-${item.id}`"

Alguma ideia de como fazer isso funcionar para um objeto, em vez de uma string?
Mike de Klerk,

@MikedeKlerk apenas remova os colchetes: Se você estiver vinculando a um objeto foo, a sintaxe v1 seria :my-object="{{ foo }}"e a sintaxe v2 seria :my-object="foo".
obrigado

com a <div>tag: <div :id="'purchase-id-' + item._id">. Exemplo de renderização:<div id="purchase-id-5bb254557e1cef3b4cc40529">
rprasad 01 de

1
E se você quiser adicionar atributos existentes? Por exemplo, anexar algumas classes sem substituí-las?
Adam Reis

3
@AdamReis você pode ter classe :classpara o mesmo elemento. Vue.js irá mesclar os dois atributos. Veja lá: jsfiddle.net/eywraw8t/466181 Ou se você deseja usar apenas :class: jsfiddle.net/eywraw8t/466183
Happyriwan

5

Se você está puxando dados de um objeto e imagens da pasta src / assets, você precisa incluir require ('assets / path / image.jpeg') em seu objeto, como fiz abaixo.

Exemplo de trabalho:

people: [
  {
    name: "Name",
    description: "Your Description.",
    closeup: require("../assets/something/absolute-black/image.jpeg"),
  },

Não está em seu elemento v-img - Não funciona

<v-img :src="require(people.closeup)"></v-img>

3

Use v-bind ou sintaxe de atalho ':' para vincular o atributo. Exemplo:

<input v-bind:placeholder="title">
<input :placeholder="title">

Mas alguém pode me ajudar por que não podemos usar placeholder = "{{title}}"
Sibashrit Pattnaik

a interpolação foi removida dos atributos, ela só é usada dentro de elementos html agora
Radu Diță


0

a maneira mais fácil é exigir o endereço do arquivo :

<img v-bind:src="require('../image-address/' + image_name)" />

o exemplo completo abaixo mostra ../assets/logo.png:

<template>
          <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
export default {
  name: "component_name",
  data: function() {
    return {
      img: "logo.png"
    };
  }
};
</script>

0

A solução mais elegante é salvar as imagens fora do Webpack. Por padrão, o Webpack compacta imagens em base64, portanto, se você salvar imagens em sua pasta de ativos, isso não funcionará porque o Webpack compactará imagens em base64, e isso NÃO É uma variável reativa.

Para resolver seu problema, você precisa salvar suas imagens em seu CAMINHO PÚBLICO. Normalmente, o caminho público está na pasta "pública" ou "estática".

Finalmente, você pode fazer isso:

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

E seu HTML, você pode fazer isso:

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

Quando usar a pasta pública

  • Você precisa de um arquivo com um nome específico na saída da compilação
  • O arquivo depende de uma variável reativa que pode mudar no tempo de execução
  • Você tem imagens e precisa referenciar dinamicamente seus caminhos
  • Algumas bibliotecas podem ser incompatíveis com Webpack e você não tem outra opção a não ser incluí-las como uma tag.

MAIS INFORMAÇÕES: "HTML and Static Assets" na documentação do Vue JS

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.