Как устранить интерполирование внутри атрибутов было удалено. Использовать v-bind или сокращенную двоеточие? Vue.JS 2

Мой компонент 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 = "purchase- {{item.id}}": Интерполяция внутренних атрибутов была удалена. Вместо этого используйте v-bind или сокращенную двоеточие.

Как я могу это решить?

Ответ 1

Использовать код javascript внутри v-bind (или ярлык ":"):

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

а также

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

Или, если вы используете ES6+:

:id="'purchase-${item.id}'"

Ответ 2

Если вы извлекаете данные из объекта и изображения из папки src/assets, вам необходимо включить в ваш объект require ('assets/path/image.jpeg'), как я это сделал ниже.

Рабочий пример:

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

Не в вашем элементе v-img - Не работает

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

Ответ 3

Используйте v-bind или ярлык синтаксиса ":" для привязки атрибута. Пример:

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