[Vuejs]-Binding class with VueJS and Props

by

0👍

✅

Your binding is trying to interpret circle as a variable. Either remove the colon (since there doesn’t need to be a binding):

<div>
     <avatar-img
      :imgHeight="100"
      :imgWidth="100"
      imgType="circle">
     </avatar-img>
</div>

Or put circle in single quotes so it is interpreted as a String (Spaces added for emphasis):

<div>
     <avatar-img
      :imgHeight="100"
      :imgWidth="100"
      :imgType=" 'circle' "> 
     </avatar-img>
</div>

Consider the following:

const app = new Vue({
  el: "#app",
  components: {
    "avatar-img": {
      props: ['imgHeight', 'imgWidth', 'imgType'],
      methods: {
        isCircle: function() {
          return this.imgType === 'circle';
        }
      }
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>


<div id="app">
  <avatar-img :img-height="100" :img-width="100" img-type="circle" inline-template>
    <div>
      <img :class="{'img-circle': isCircle()}" src="./assets/defaultImg" :height="imgHeight" :width="imgWidth">
    </div>
  </avatar-img>
</div>

Leave a comment