Vue 2 - 在组件中使用组件

Question

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 class="quest-reward bg-dark">
      <div class="rewardLevel">{{ level }}</div>
      <div v-if="!showFree()" class="bg-success freeReward">FREE</div>
      <div class="rewardItem">
        <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:class="glowClass"/>
    `,
})

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?

Answer 1

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:class="glowClass"/> `, }) 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 class="quest-reward bg-dark"> <div class="rewardLevel">{{ level }}</div> <div v-if=",showFree()" class="bg-success freeReward">FREE</div> <div class="rewardItem"> <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>