Tyssen
Tyssen

Reputation: 1711

Vue: unexpected token: ':' in image path

I'm passing an image path to a child Vue component but get:

unexpected token: ':' in https://path.to.image/image.jpg

I've created a Vue sandbox that illustrates the problem.

HTML

<div class="js-product-map">
  <product-map
    :logo="https://path.to.image/image.jpg"
  />
</div>

Component

<template>
  <div>
    <img :src="image" />
  </div>
</template>

<script>
export default {
  props: {
    logo: {
      type: String,
      required: true,
    },
  },

  computed: {
    image() {
      return this.logo;
    },
  },
};
</script>

What am I doing wrong?

Upvotes: 0

Views: 124

Answers (1)

cpppatrick
cpppatrick

Reputation: 759

Can you clarify what it is you're trying to do exactly? Because it's not entirely clear to me.

The error you're getting is coming from this:

<div class="js-product-map">
  <product-map
    :logo="https://path.to.image/image.jpg"
  />
</div>

It's complaining about the : on the logo attribute. But I question why you're doing it this way to begin with. Typically you only want a single selector in index.html as the root of your app. Unless you're trying to have multiple Vue instances.

The way that you have your ProductMap component set up in your sandbox seems like it would accomplish what you're trying to do in index.html.

Upvotes: 1

Related Questions