Bagaimana mengatasi Interpolasi di dalam atribut telah dihapus. Gunakan v-bind atau singkatan dari titik dua? Vue.JS 2

101

Komponen vue saya seperti ini:

    <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>

Saat dijalankan, ada kesalahan seperti ini:

Kesalahan sintaks template Vue:

id = "purchase - {{item.id}}": Interpolasi di dalam atribut telah dihapus. Gunakan v-bind atau singkatan dari titik dua.

Bagaimana saya bisa mengatasinya?

samuel toh
sumber

Jawaban:

189

Gunakan kode javascript di dalam v-bind(atau pintasan ":"):

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

dan

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

Atau jika menggunakan ES6 +:

:id="`purchase-${item.id}`"
Happyriwan
sumber
Ada ide bagaimana membuat ini bekerja untuk sebuah objek, bukan string?
Mike de Klerk
@MikedeKlerk hapus saja tanda kurung: Jika Anda mengikat objek foo, sintaks v1 akan menjadi :my-object="{{ foo }}"dan sintaks v2 akan menjadi :my-object="foo".
terima kasih
dengan <div>tag: <div :id="'purchase-id-' + item._id">. Contoh rendering:<div id="purchase-id-5bb254557e1cef3b4cc40529">
rprasad
1
Bagaimana jika Anda ingin menambahkan atribut yang sudah ada? Misalnya menambahkan beberapa kelas tanpa menimpanya?
Adam Reis
3
@AdamReis Anda dapat memiliki classdan :classuntuk elemen yang sama. Vue.js akan menggabungkan dua atribut tersebut. Lihat di sana: jsfiddle.net/eywraw8t/466181 Atau jika Anda hanya ingin menggunakan :class: jsfiddle.net/eywraw8t/466183
Happyriwan
5

Jika Anda menarik data dari suatu objek dan gambar dari folder src / assets, Anda perlu menyertakan require ('assets / path / image.jpeg') di objek Anda seperti yang saya lakukan di bawah ini.

Contoh kerja:

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

Tidak dalam elemen v-img Anda - Jangan bekerja

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

Gunakan sintaks v-bind atau pintasan ':' untuk mengikat atribut. Contoh:

<input v-bind:placeholder="title">
<input :placeholder="title">
Sibashrit Pattnaik
sumber
Tapi Adakah yang bisa membantu saya mengapa kita tidak bisa menggunakan placeholder = "{{title}}"
Sibashrit Pattnaik
interpolasi telah dihapus dari atribut, sekarang hanya digunakan di dalam elemen html
Radu Diță
2

Gunakan saja

:src="`img/profile/${item.photo}`"
Mahedi Hasan Durjoy
sumber
0

cara termudah adalah juga meminta alamat file :

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

contoh lengkap di bawah ini menunjukkan ../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>
sina
sumber
0

Solusi paling elegan adalah menyimpan gambar di luar Webpack. Secara default, Webpack memampatkan gambar di base64, jadi jika Anda menyimpan gambar di folder aset, itu tidak berfungsi karena Webpack akan mengompresi gambar di base64, dan itu TIDAK merupakan variabel reaktif.

Untuk mengatasi masalah Anda, Anda perlu menyimpan gambar Anda di PATH UMUM Anda. Biasanya jalur publik ada di folder "publik" atau "statika".

Terakhir, Anda bisa melakukan ini:

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

Dan HTML Anda, Anda dapat melakukan ini:

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

Kapan menggunakan folder publik

  • Anda membutuhkan file dengan nama tertentu dalam keluaran build
  • File bergantung pada variabel reaktif yang dapat berubah dalam waktu eksekusi
  • Anda memiliki gambar dan perlu mereferensikan jalurnya secara dinamis
  • Beberapa pustaka mungkin tidak kompatibel dengan Webpack dan Anda tidak memiliki pilihan lain selain memasukkannya sebagai tag.

INFORMASI LEBIH LANJUT: "HTML dan Aset Statis" dalam dokumentasi Vue JS

Joan Galmés Riera
sumber