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?
vue.js
vuejs2
vue-component
samuel toh
sumber
sumber
foo
, sintaks v1 akan menjadi:my-object="{{ foo }}"
dan sintaks v2 akan menjadi:my-object="foo"
.<div>
tag:<div :id="'purchase-id-' + item._id">
. Contoh rendering:<div id="purchase-id-5bb254557e1cef3b4cc40529">
class
dan:class
untuk 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/466183Jika 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:
Tidak dalam elemen v-img Anda - Jangan bekerja
sumber
Gunakan sintaks v-bind atau pintasan ':' untuk mengikat atribut. Contoh:
sumber
Gunakan saja
sumber
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:
sumber
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:
Dan HTML Anda, Anda dapat melakukan ini:
Kapan menggunakan folder publik
INFORMASI LEBIH LANJUT: "HTML dan Aset Statis" dalam dokumentasi Vue JS
sumber