137

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
samuel toh
  • 6,836
  • 21
  • 71
  • 108

7 Answers7

248

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}`"
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Happyriri
  • 4,295
  • 1
  • 17
  • 28
  • Any idea how to make this work for an object, instead of a string? – Mike de Klerk Oct 12 '17 at 07:24
  • @MikedeKlerk just remove the brackets: If you're binding to an object `foo`, v1 syntax would be `:my-object="{{ foo }}"` and v2 syntax would be `:my-object="foo"`. – thanksd Oct 30 '17 at 15:25
  • with the `
    ` tag: `
    `. Example rendering: `
    `
     – rprasad Oct 01 '18 at 18:12
  • 1
    What if you want to add to existing attributes? E.g. append some classes without overwriting them? – Adam Reis Nov 13 '18 at 02:43
  • 3
    @AdamReis you can have `class` and `:class` for the same element. Vue.js will merge the two attribute. See there : https://jsfiddle.net/eywraw8t/466181/ Or if you want to use only `:class` : https://jsfiddle.net/eywraw8t/466183/ – Happyriri Nov 18 '18 at 21:05
7

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

<input v-bind:placeholder="title">
<input :placeholder="title">
Sibashrit Pattnaik
  • 305
  • 2
  • 9
7

Just use

:src="`img/profile/${item.photo}`"
Mahedi Hasan Durjoy
  • 1,031
  • 13
  • 17
6

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>
Jason
  • 813
  • 11
  • 13
1

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>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
sina
  • 2,103
  • 1
  • 19
  • 26
0

The most elegant solution is save images outside Webpack. By default, Webpack compress images in Base64, so if you save images in your assets folder, that doesn't work because Webpack will compress images in base64, and that isn’t a reactive variable.

To solve your problem, you need to save your images in your public path. Usually the public path is in "public" folder or "statics".

Finally, you can do this:

data(){
  return {
    image: 1,
    publicPath: process.env.BASE_URL
  }
}

And your HTML you can do this:

<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">

When to use the public folder

  • You need a file with a specific name in the build output
  • File depends on a reactive variable that can change in execution time
  • You have images and need to dynamically reference their paths
  • Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.

More information: "HTML and Static Assets" in Vue.js documentation

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Joan Galmés Riera
  • 533
  • 5
  • 13
0

If none of the previous answers work, do this specially in Vue-3 and Composition API:

:src="require(`../image/animal_image/${image}`)"
Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
Mikael Tenshio
  • 120
  • 7