Мой компонент vue выглядит так:
<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>
При выполнении возникает такая ошибка:
Синтаксическая ошибка шаблона Vue:
id = "закупка - {{item.id}}": интерполяция внутри атрибутов удалена. Вместо этого используйте v-bind или сокращенное обозначение двоеточия.
Как я могу это решить?
vue.js
vuejs2
vue-component
Самуэль То
источник
источник
foo
, синтаксис v1 будет таким,:my-object="{{ foo }}"
а синтаксис v2 будет:my-object="foo"
.<div>
тегом:<div :id="'purchase-id-' + item._id">
. Пример рендеринга:<div id="purchase-id-5bb254557e1cef3b4cc40529">
class
и:class
для того же элемента. Vue.js объединит два атрибута. Смотрите там: jsfiddle.net/eywraw8t/466181 Или, если вы хотите использовать только:class
: jsfiddle.net/eywraw8t/466183Если вы извлекаете данные из объекта и изображения из папки src / assets, вам необходимо включить require ('assets / path / image.jpeg') в свой объект, как я сделал ниже.
Рабочий пример:
Не в вашем элементе v-img - не работает
источник
Используйте v-bind или сокращенный синтаксис ':' для привязки атрибута. Пример:
источник
Просто используйте
источник
Самый простой способ - тоже потребовать адрес файла :
<img v-bind:src="require('../image-address/' + image_name)" />
Полный пример ниже показывает ../assets/logo.png:
источник
Самым элегантным решением является сохранение изображений вне Webpack. По умолчанию Webpack сжимает изображения в base64, поэтому, если вы сохраняете изображения в папке с ресурсами, это не сработает, потому что Webpack сжимает изображения в base64, а это НЕ реактивная переменная.
Чтобы решить вашу проблему, вам необходимо сохранить ваши изображения в ПУБЛИЧНЫЙ ПУТЬ. Обычно публичный путь находится в «публичной» папке или «статике».
Наконец, вы можете сделать это:
И свой HTML вы можете сделать так:
Когда использовать общую папку
ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ: «HTML и статические активы» в документации Vue JS
источник