Vue 2 - using components inside components-CodePudding

I have the following code: import './menu-item'; import ItemImage from "./item-image";

Vue.component('quest-card', {
    props: {
        title: String,
        isFree: Boolean,
        points: Number,
        item: String,
        level: Number,
    },
    components: {
        ItemImage
    },
    methods: {
        showFree: function() {
            return !! this.isFree;
        },
    },
    template: `
      <section >
      <div >{{ level }}</div>
      <div v-if="!showFree()" >FREE</div>
      <div >
        <item-image name="item" heb-name="test" rarity="epic"></item-image>
      </div>
      </section>
    `,
})

My component are used in a legacy HTML/JQuery website using selector (for this one - <quest-card ...> and it's not rendered with the item-image component:

Item image component looks like this:

const ItemImage = Vue.component('ItemImage', {
    props: ['name','heb-name', {
        rarity: {
            default: 'normal',
            type: String,
        }
    }],
    computed: {
      glowClass: () => {
          return `glow-${this.rarity}`;
        }
    },
    template: `
      <img v-bind:src="'images/items/'   item   '.png'" v-bind:/>
    `,
})

export default ItemImage;

the export default of the Vue component seem wrong, but not sure what I have to do so they can play together. Any idea?

CodePudding user response：

You had problems in defining the props

const ItemImage = Vue.component('ItemImage', {
    props: {name: String, 'heb-name': String, item: [String, Number], rarity: {
            default: 'normal',
            type: String,
        }},
    computed: {
      glowClass: () => {
          return `glow-${this.rarity}`;
        }
    },
    template: `
      <img v-bind:src="'images/items/'   item   '.png'" v-bind:/>
    `,
})

Vue.component('quest-card', {
    props: {
        title: String,
        isFree: Boolean,
        points: Number,
        item: String,
        level: Number,
    },
    components: {
        ItemImage
    },
    methods: {
        showFree: function() {
            return !! this.isFree;
        },
    },
    template: `
      <section >
      <div >{{ level }}</div>
      <div v-if="!showFree()" >FREE</div>
      <div >
        <item-image name="item" heb-name="test" rarity="epic"></item-image>
      </div>
      </section>
    `,
})

new Vue({
  el: '#app',
})

<div id="app"><quest-card /></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>