Mój komponent vue wygląda tak:
<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>
Po uruchomieniu występuje taki błąd:
Błąd składni szablonu Vue:
id = "zakup - {{item.id}}": Interpolacja wewnątrz atrybutów została usunięta. Zamiast tego użyj v-bind lub skrótu dwukropka.
Jak mogę to rozwiązać?
vue.js
vuejs2
vue-component
samuel toh
źródło
źródło
foo
, składnia v1 byłaby,:my-object="{{ foo }}"
a składnia v2 byłaby:my-object="foo"
.<div>
tagiem:<div :id="'purchase-id-' + item._id">
. Przykład renderowania:<div id="purchase-id-5bb254557e1cef3b4cc40529">
class
i:class
dla tego samego elementu. Vue.js połączy te dwa atrybuty. Zobacz tam: jsfiddle.net/eywraw8t/466181 Lub jeśli chcesz używać tylko:class
: jsfiddle.net/eywraw8t/466183Jeśli pobierasz dane z obiektu i obrazy z folderu src / asset, musisz dołączyć do obiektu require ('asset / path / image.jpeg'), tak jak to zrobiłem poniżej.
Przykład pracy:
Nie w Twoim elemencie v-img - nie pracuj
źródło
Użyj v-bind lub skrótu składni „:”, aby powiązać atrybut. Przykład:
źródło
Po prostu użyj
źródło
Najprościej też wymagać adresu pliku :
<img v-bind:src="require('../image-address/' + image_name)" />
pełny przykład poniżej przedstawia ../assets/logo.png:
źródło
Najbardziej eleganckim rozwiązaniem jest zapisywanie obrazów poza Webpack. Domyślnie Webpack kompresuje obrazy w base64, więc jeśli zapisujesz obrazy w folderze zasobów, to nie działa, ponieważ Webpack kompresuje obrazy w base64, a to NIE JEST zmienną reaktywną.
Aby rozwiązać problem, musisz zapisać swoje obrazy w PUBLIC PATH. Zwykle ścieżka publiczna znajduje się w folderze „publicznym” lub „statycznym”.
Wreszcie możesz to zrobić:
A Twój HTML możesz to zrobić:
Kiedy używać folderu publicznego
WIĘCEJ INFORMACJI: „HTML i zasoby statyczne” w dokumentacji Vue JS
źródło