JavaScript-未能解析组件：“wrrestler-choice-box”如果这是本机自定义元素，请确保将其从组件解析-堆栈溢出中排除

顺晟科技

2022-10-19 12:12:16

111

一些关于我试图实现的背景故事，我有一个数组数据，我想放入我的HTML文件和一个带有模板的Vue组件。我想使用列表渲染，以便从所述数组的名称和图像绑定到自定义组件道具。然而，错误（在这篇文章的标题中）不断发生。这是我的代码:

不要介意丢失的图片，它们在我的PC上，并在文件夹中引用

如果有人能看到这个问题，请提到它，因为我一直在努力寻找它

谢谢:)

顺晟科技：

您的安装有缺陷。您引用了错误的ID。

//############--wrestlers.js--############

//--------------- PAGE TITLE ---------------//
// Vue object: Title
const PageTitle = {
    data() {
        return {
            title: 'For Hire - Wrestlers'
        }
    }
}

Vue.createApp(PageTitle).mount('#page-title')

//--------------- NAVIGATION (Cart) ---------------//
// Vue object: Title
const CartTitle = {
    data() {
        return {
            cart_title: 'Cart'
        }
    }
}

Vue.createApp(CartTitle).mount('#cart-title')

//--------------- NAVIGATION (Main pages) ---------------//
// Vue object: Title
const MainNav = {
    data() {
        return {
            home: 'Home',
            for_hire: 'For Hire',
            about: 'About',
            contact_us: 'Contact Us',
            search: 'Search'
        }
    }
}

Vue.createApp(MainNav).mount('#nav-titles')

//--------------- Hiring selection - Wrestlers ---------------//
// Custom Vue Component: Binding information to each wrestler
const app = Vue.createApp({})

app.component("wrestler-choice-box", {
    props: ['name', 'image'],

    template: 
    `
    <div class = "option_container">
        <img class = "option_image" src = "image">
        <h4 class = "option_name">{{name}}</h4>
    </div>
    `
})

app.mount('#hire-wrestler-choice')



// Vue object: Wrestlers and information
var WrestlerData = Vue.createApp ({
    data() {
        return { 
            items: [
                {wrestler_name: 'Bobby Lashley', image_src: "../Assets/Wrestlers/wrestler_1.png" },
                {wrestler_name: 'Brock Lesnar', image_src: "../Assets/Wrestlers/wrestler_2.png" },
                {wrestler_name: 'Commander Azeez', image_src: "../Assets/Wrestlers/wrestler_3.png" },
                {wrestler_name: 'Drew McIntyre', image_src: "../Assets/Wrestlers/wrestler_4.png" },
                {wrestler_name: 'Gran Metalik', image_src: "../Assets/Wrestlers/wrestler_5.png" },
                {wrestler_name: 'Jeff Hardy', image_src: "../Assets/Wrestlers/wrestler_6.png" },
                {wrestler_name: 'John Cena', image_src: "../Assets/Wrestlers/wrestler_7.png" },
                {wrestler_name: 'Kevin Owens', image_src: "../Assets/Wrestlers/wrestler_8.png" },
                {wrestler_name: 'Lince Derado', image_src: "../Assets/Wrestlers/wrestler_9.png" },
                {wrestler_name: 'Pete Dunne', image_src: "../Assets/Wrestlers/wrestler_10.png" },
                {wrestler_name: 'Sheamus', image_src: "../Assets/Wrestlers/wrestler_11.png" },
                {wrestler_name: 'Undertaker', image_src: "../Assets/Wrestlers/wrestler_12.png" },
                {wrestler_name: 'Akira Tozawa', image_src: "../Assets/Wrestlers/wrestler_13.png" },
                {wrestler_name: 'Corey Grimes', image_src: "../Assets/Wrestlers/wrestler_14.png" },
                {wrestler_name: 'Jinder Mahal', image_src: "../Assets/Wrestlers/wrestler_15.png" },
                {wrestler_name: 'T-Bone', image_src: "../Assets/Wrestlers/wrestler_16.png" },
            ]
        }
    }
}).mount('#wrestler-data')

在HTML中，此id设置在试图调用的组件上

//############--wrestlers.js--############

//--------------- PAGE TITLE ---------------//
// Vue object: Title
const PageTitle = {
    data() {
        return {
            title: 'For Hire - Wrestlers'
        }
    }
}

Vue.createApp(PageTitle).mount('#page-title')

//--------------- NAVIGATION (Cart) ---------------//
// Vue object: Title
const CartTitle = {
    data() {
        return {
            cart_title: 'Cart'
        }
    }
}

Vue.createApp(CartTitle).mount('#cart-title')

//--------------- NAVIGATION (Main pages) ---------------//
// Vue object: Title
const MainNav = {
    data() {
        return {
            home: 'Home',
            for_hire: 'For Hire',
            about: 'About',
            contact_us: 'Contact Us',
            search: 'Search'
        }
    }
}

Vue.createApp(MainNav).mount('#nav-titles')

//--------------- Hiring selection - Wrestlers ---------------//
// Custom Vue Component: Binding information to each wrestler
const app = Vue.createApp({})

app.component("wrestler-choice-box", {
    props: ['name', 'image'],

    template: 
    `
    <div class = "option_container">
        <img class = "option_image" src = "image">
        <h4 class = "option_name">{{name}}</h4>
    </div>
    `
})

app.mount('#hire-wrestler-choice')



// Vue object: Wrestlers and information
var WrestlerData = Vue.createApp ({
    data() {
        return { 
            items: [
                {wrestler_name: 'Bobby Lashley', image_src: "../Assets/Wrestlers/wrestler_1.png" },
                {wrestler_name: 'Brock Lesnar', image_src: "../Assets/Wrestlers/wrestler_2.png" },
                {wrestler_name: 'Commander Azeez', image_src: "../Assets/Wrestlers/wrestler_3.png" },
                {wrestler_name: 'Drew McIntyre', image_src: "../Assets/Wrestlers/wrestler_4.png" },
                {wrestler_name: 'Gran Metalik', image_src: "../Assets/Wrestlers/wrestler_5.png" },
                {wrestler_name: 'Jeff Hardy', image_src: "../Assets/Wrestlers/wrestler_6.png" },
                {wrestler_name: 'John Cena', image_src: "../Assets/Wrestlers/wrestler_7.png" },
                {wrestler_name: 'Kevin Owens', image_src: "../Assets/Wrestlers/wrestler_8.png" },
                {wrestler_name: 'Lince Derado', image_src: "../Assets/Wrestlers/wrestler_9.png" },
                {wrestler_name: 'Pete Dunne', image_src: "../Assets/Wrestlers/wrestler_10.png" },
                {wrestler_name: 'Sheamus', image_src: "../Assets/Wrestlers/wrestler_11.png" },
                {wrestler_name: 'Undertaker', image_src: "../Assets/Wrestlers/wrestler_12.png" },
                {wrestler_name: 'Akira Tozawa', image_src: "../Assets/Wrestlers/wrestler_13.png" },
                {wrestler_name: 'Corey Grimes', image_src: "../Assets/Wrestlers/wrestler_14.png" },
                {wrestler_name: 'Jinder Mahal', image_src: "../Assets/Wrestlers/wrestler_15.png" },
                {wrestler_name: 'T-Bone', image_src: "../Assets/Wrestlers/wrestler_16.png" },
            ]
        }
    }
}).mount('#wrestler-data')

必须将其挂载到现有的html元素上才能访问该组件。例如:

//############--wrestlers.js--############

//--------------- PAGE TITLE ---------------//
// Vue object: Title
const PageTitle = {
    data() {
        return {
            title: 'For Hire - Wrestlers'
        }
    }
}

Vue.createApp(PageTitle).mount('#page-title')

//--------------- NAVIGATION (Cart) ---------------//
// Vue object: Title
const CartTitle = {
    data() {
        return {
            cart_title: 'Cart'
        }
    }
}

Vue.createApp(CartTitle).mount('#cart-title')

//--------------- NAVIGATION (Main pages) ---------------//
// Vue object: Title
const MainNav = {
    data() {
        return {
            home: 'Home',
            for_hire: 'For Hire',
            about: 'About',
            contact_us: 'Contact Us',
            search: 'Search'
        }
    }
}

Vue.createApp(MainNav).mount('#nav-titles')

//--------------- Hiring selection - Wrestlers ---------------//
// Custom Vue Component: Binding information to each wrestler
const app = Vue.createApp({})

app.component("wrestler-choice-box", {
    props: ['name', 'image'],

    template: 
    `
    <div class = "option_container">
        <img class = "option_image" src = "image">
        <h4 class = "option_name">{{name}}</h4>
    </div>
    `
})

app.mount('#hire-wrestler-choice')



// Vue object: Wrestlers and information
var WrestlerData = Vue.createApp ({
    data() {
        return { 
            items: [
                {wrestler_name: 'Bobby Lashley', image_src: "../Assets/Wrestlers/wrestler_1.png" },
                {wrestler_name: 'Brock Lesnar', image_src: "../Assets/Wrestlers/wrestler_2.png" },
                {wrestler_name: 'Commander Azeez', image_src: "../Assets/Wrestlers/wrestler_3.png" },
                {wrestler_name: 'Drew McIntyre', image_src: "../Assets/Wrestlers/wrestler_4.png" },
                {wrestler_name: 'Gran Metalik', image_src: "../Assets/Wrestlers/wrestler_5.png" },
                {wrestler_name: 'Jeff Hardy', image_src: "../Assets/Wrestlers/wrestler_6.png" },
                {wrestler_name: 'John Cena', image_src: "../Assets/Wrestlers/wrestler_7.png" },
                {wrestler_name: 'Kevin Owens', image_src: "../Assets/Wrestlers/wrestler_8.png" },
                {wrestler_name: 'Lince Derado', image_src: "../Assets/Wrestlers/wrestler_9.png" },
                {wrestler_name: 'Pete Dunne', image_src: "../Assets/Wrestlers/wrestler_10.png" },
                {wrestler_name: 'Sheamus', image_src: "../Assets/Wrestlers/wrestler_11.png" },
                {wrestler_name: 'Undertaker', image_src: "../Assets/Wrestlers/wrestler_12.png" },
                {wrestler_name: 'Akira Tozawa', image_src: "../Assets/Wrestlers/wrestler_13.png" },
                {wrestler_name: 'Corey Grimes', image_src: "../Assets/Wrestlers/wrestler_14.png" },
                {wrestler_name: 'Jinder Mahal', image_src: "../Assets/Wrestlers/wrestler_15.png" },
                {wrestler_name: 'T-Bone', image_src: "../Assets/Wrestlers/wrestler_16.png" },
            ]
        }
    }
}).mount('#wrestler-data')

编辑:

您使用占位符应用程序只是为了挂载它。我建议将组件直接添加到wrestlerData实例中。

这样，您就可以摆脱var应用程序，并可以访问需要遍历的数据。

有用链接：组件注册

上一篇：JavaScript-ChartJs 下一篇：HTML-如何在我的视图页中显示图像

网站建设

Html

JavaScript-未能解析组件：“wrrestler-choice-box”如果这是本机自定义元素，请确保将其从组件解析-堆栈溢出中排除