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

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?

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}`"

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>

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

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

Gunakan saja

:src="`img/profile/${item.photo}`"

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>

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