VueJS bind attribute to component in App.vue

Question

I am using VueJS via VUE CLI and have a component called Icon.vue. This component has a variable which should be set by the App.vue file. How can i achieve this?

This is my App.vue file:

<template>
  <div id="app">
    <Icon iconUrl="../assets/img/plant-icon-1.svg" iconAlt="Blume"/>
  </div>
</template>

<script>
  import Icon from './components/Icon.vue'

  export default {
    name: 'app',
    components: {
      Icon
    }
  }
</script>

and there's my Icon.vue file:

<template>
  <div class="container iconBar">
    <div class="row">
      <div class="col text-center py-5">
        <img :src="{ iconUrl }" :alt="{ iconAlt }">
      </div>
    </div>
  </div>
</template>

What am i missing? Nothing is generated in the frontend. It's just empty.

UPDATE

As suggested i edited my Icon.vue like this. But still NO output. In the frontend i get an empty image and an [object Object] output in the alt-Tag

<template>
  <div class="container iconBar">
    <div class="row">
      <div class="col text-center py-5">
        <img :src="{ iconUrl }" :alt="{ iconAlt }">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      iconUrl: {
        type: String,
        required: true
      },
      iconAlt: {
        type: String,
        required: true
      }
    }
  }
</script>

UPDATE 2

Now it works. The fault was that i called an object and not the string. Therefore you have to write

        <img :src="iconUrl" :alt="iconAlt">

instead of

        <img :src="{ iconUrl }" :alt="{ iconAlt }">

Thanks everyone!

In your icon.vue component remove the :src brackets and use props. — Christian Carrillo
– Christian Carrillo, Commented Jul 24, 2019 at 15:05

tony19 · Accepted Answer · 2022-07-15 01:48:58Z

2

Add a prop to the Icon component, like so:

<template>
  <div class="container iconBar">
    <div class="row">
      <div class="col text-center py-5">
        <img :src="iconUrl" :alt="iconAlt">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['iconUrl', 'iconAlt']
}
</script>

take a look at the documentation: https://v2.vuejs.org/v2/guide/components-props.html

You could also add validation to it to ensure it's supplied and is a string:

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

edited Jul 15, 2022 at 1:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 24, 2019 at 15:05

Victor P

1,61119 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Max Over a year ago

Thanks, but have a look at the update above. Still not working

Victor P Over a year ago

@Max, yes I also corrected that in the html but forgot to mention it. Glad you got it resolved.

Alagie Sellu · Accepted Answer · 2019-07-24 15:08:18Z

1

In your Icon.vue file, add your props.


<template>
  <div class="container iconBar">
    <div class="row">
      <div class="col text-center py-5">
        <img :src="{ iconUrl }" :alt="{ iconAlt }">
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        props: ['iconUrl', 'iconAlt'],
    }
</script>

answered Jul 24, 2019 at 15:08

Alagie Sellu

132 bronze badges

2 Comments

Max Over a year ago

Thanks, but have a look at the update above. Still not working

Alagie Sellu Over a year ago

I think this might be the problem. php <img :src="{{ iconUrl }}" :alt="{{ iconAlt }}">

Christian Carrillo · Accepted Answer · 2019-07-24 15:31:07Z

Consider not using camelcase convention to call props in your component instead use kebab-case like this:

Vue.component('icon-component', {
  props: ['iconName', 'iconAlt'],
  data () {
    return {
      iconUrl: '../assets/img/' + this.iconName + '.svg'
    }
  },
  template: `
    <div class="container iconBar">
      <div class="row">
        <div class="col text-center py-5">
          <img :src="iconUrl" :alt="iconAlt">
            <p>icon url path: {{ iconUrl }}</p>
        </div>
      </div>
    </div>
  `,
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <icon-component
    icon-name="plant-icon-1" 
    icon-alt="Blume" 
  />
</div>

Collectives™ on Stack Overflow

VueJS bind attribute to component in App.vue

UPDATE

UPDATE 2

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

UPDATE 2

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related