How can I solve "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2

My Vue.js component is like this:

    <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>

When executed, there exists an error like this:

Vue template syntax error:

id="purchase-{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

How can I solve it?

Use JavaScript code inside v-bind (or shortcut ":"):

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

and

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

Or if using ES6 or later:

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

If you're pulling data from an array of objects, you need to include require('assets/path/image.jpeg') in your object like I did below.

Working example:

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

Using require(objectName.propName.urlPath) in the v-img element did not work for me.

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

Use v-bind or shortcut syntax ':' to bind the attribute. Example:

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

Just use

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

The easiest way is too require the file address:

<img v-bind:src="require('../image-address/' + image_name)" />

The complete example below shows ../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>