javascript - Failed to resolve component: "wrestler-choice-box" If this is a native custom element, make sure

Some backstory on what I am trying to achieve, I have an array of data that I would like to put into my HTML file and a Vue ponent with a template. I would like to use list rendering so that the name and images from said array bind to the custom ponent props. However, the error (in the title of this post) keep occuring. This is my code:

//############--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({})

appponent("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')

/* Stylesheet for SIT120 Project - wrestlers.css */
/*----------------------------------------------------*/

/*/////////////////////////-NO margins-//////////////////////////////*/
/* Expands to width of screen*/
body, html {
    margin: 0;
    padding: 0;
}

/*/////////////////////////-Header Navigation-//////////////////////////////*/

/* Top navigation (cart) */
.cart_nav ul {
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #C6393F; 
}

.cart_nav li {
    float: right;
}

.cart_nav li a {
    font-family: Actor;
    font-size: 18px;
    font-style: normal;
    font-weight:normal;
    padding: 15px 55px 15px 20px;
    color: white;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    
}

.cart_nav li a:hover 
{
    color:#AAAAAA;
}

/*/////////////////////////-Cart Number-//////////////////////////////*/

/* Cart number (circled) */
.cart_items 
{
    font-family: Righteous;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color:#2C2C2C;
    float: right; 
    margin-top: 16px;
    margin-right: 16px;
    margin-left: -33px;
    border-radius: 60%;
    width: 25px;
    height: 22px;
    text-align: center; 
}

/*/////////////////////////-Cart icons-//////////////////////////////*/

/* Top navigation ICONS (cart) */
.cart_icon
{
    display:inline-flex;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-bottom: -15px;
    margin-right: -17px;
    padding-left: 8px;
}

/*/////////////////////////-Main navigation-//////////////////////////////*/

/* Main navigation (pages) */
.page_nav ul
{
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #2C2C2C;
}

.page_nav li 
{
    float: left;
}

.page_nav li a {
    font-family: Bai Jamjuree;
    font-size: 22px;
    font-weight: bold;
    padding: 15px;
    line-height: 22px;
    color: #AAAAAA;
    display: inline-block;
    padding: 40px 60px 35px 30px;
    text-decoration: none;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.page_nav li a:hover 
{
    color:#FFFFFF;
}

.page_nav li a.active
{
    text-decoration: overline;
    color:#FFFFFF;

}
.page_nav li a:focus
{
    text-decoration: overline;
    color:#FFFFFF;

}




/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/

/* Main navigation search ICON */
.search_icon
{
    display:inline-block;
    width: 35px;
    height: 37px;
    margin-top: -40px;
    margin-bottom: -15px;
    margin-right: -50px;
    padding-left: 13px;
    padding-right: 45px;
}

/*/////////////////////////-LOGO-//////////////////////////////*/

 /* Main logo (Wrestle Hire logo) */
.site_logo
{
    display: inline;
    float: left;
    width: 180px;
    height: 145px; 
    padding-right: 50px;
    margin-bottom: -20px;
    margin-left: -30px;
    margin-top: -10px;
}

.site_logo:hover
{
    cursor: pointer;
}

/*/////////////////////////-Hiring selection - Wrestlers-//////////////////////////////*/
.option_row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

.option_container
{
    flex-basis: 20%;
    padding: 17px;
    min-width: 200px;
    transition: transform 0.5s;
    transition: 0.5s;
}

.option_container:hover
{
    transform: translateY(-3px);
    box-shadow: 0 0 15px #C6393F;
    border-radius: 3px;
}

.option_image
{
    width: 100%;
    transition: 0.5s;
}

.option_list_container
{
    margin: auto;
    padding-left: 40px;
    padding-right: 40px;
}

.option_name
{
    font-family: Bai Jamjuree;
    font-size: 1.2em;
    margin-top: -1px;
}

.rating
{
    color: #C6393F;
    margin-top: -20px;
}

<!--HTML FILE: wrestlers.html-->

<!DOCTYPE html>
<html>
    <head>
        <!--Stylesheets-->
        <link rel="stylesheet" type= "text/css" href="wrestlers.css">

        <!--Link Vue Framework-->
        <script src="@next"></script>

        <!-- Set responsiveness to screen size -->
        <meta name="viewport" content="width=device-width, initial-scale=1">    

        <!--Google fonts-->
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href=" Jamjuree">
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href="">

        <!--Star icon (Font Awesome)-->
        <script src=".js"></script>


        <!--Page Icon-->
        <link rel="icon" href="../Assets/page_icon.png">

        <!-- Page title-->
        <title id="page-title">{{title}}</title>
    </head>
    
    <body>
        <!--NAVIGATION-->
        <header>
            <!--Top navigation section (login, account and cart)-->
            <div class = "cart_nav" id = "cart-title">
                <ul>
                    <div class = "cart_items">0</div>
                    <li><a href="#cart">{{cart_title}}<img class = "cart_icon" src="../Assets/cart.png" alt="cart_icon"></a></li>
                </ul>
            </div>

              <!--Main navigation section (main pages)-->
            <div class = "page_nav" id = "nav-titles">
                <ul>
                    <!--All main pages will have .html files, this example has the contact as a separate file (and empty files)-->
                    <a href="../Home/home.html"><img href ="../Home/home.html" class = "site_logo" id = "siteLogo" src="../Assets/website_logo.png"/></a>
                    <li><a href="../Home/home.html">{{home}}</a></li>
                    <li><a href="">{{for_hire}}</a></li>
                    <li><a href="">{{about}}</a></li>
                    <li><a href="../Contact/contact.html">{{contact_us}}</a></li>
                    <li class = "search" style="float:right"><a>{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
                </ul>
            </div>
        </header>

        <!--Wrestlers-->
        <div class = "small_container" id = "wrestler-data">
            <div class = "option_row" >
                <wrestler-choice-box id ="hire-wrestler-choice" v-for="item in items" :name="item.wrestler_name" :image="item.image_src">
                </wrestler-choice-box>
            </div>
        </div>
    </body>

    <!-- Link JavaScript file -->
    <script src="wrestlers.js"></script>
</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.ponent("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')

/* Stylesheet for SIT120 Project - wrestlers.css */
/*----------------------------------------------------*/

/*/////////////////////////-NO margins-//////////////////////////////*/
/* Expands to width of screen*/
body, html {
    margin: 0;
    padding: 0;
}

/*/////////////////////////-Header Navigation-//////////////////////////////*/

/* Top navigation (cart) */
.cart_nav ul {
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #C6393F; 
}

.cart_nav li {
    float: right;
}

.cart_nav li a {
    font-family: Actor;
    font-size: 18px;
    font-style: normal;
    font-weight:normal;
    padding: 15px 55px 15px 20px;
    color: white;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    
}

.cart_nav li a:hover 
{
    color:#AAAAAA;
}

/*/////////////////////////-Cart Number-//////////////////////////////*/

/* Cart number (circled) */
.cart_items 
{
    font-family: Righteous;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color:#2C2C2C;
    float: right; 
    margin-top: 16px;
    margin-right: 16px;
    margin-left: -33px;
    border-radius: 60%;
    width: 25px;
    height: 22px;
    text-align: center; 
}

/*/////////////////////////-Cart icons-//////////////////////////////*/

/* Top navigation ICONS (cart) */
.cart_icon
{
    display:inline-flex;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-bottom: -15px;
    margin-right: -17px;
    padding-left: 8px;
}

/*/////////////////////////-Main navigation-//////////////////////////////*/

/* Main navigation (pages) */
.page_nav ul
{
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #2C2C2C;
}

.page_nav li 
{
    float: left;
}

.page_nav li a {
    font-family: Bai Jamjuree;
    font-size: 22px;
    font-weight: bold;
    padding: 15px;
    line-height: 22px;
    color: #AAAAAA;
    display: inline-block;
    padding: 40px 60px 35px 30px;
    text-decoration: none;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.page_nav li a:hover 
{
    color:#FFFFFF;
}

.page_nav li a.active
{
    text-decoration: overline;
    color:#FFFFFF;

}
.page_nav li a:focus
{
    text-decoration: overline;
    color:#FFFFFF;

}




/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/

/* Main navigation search ICON */
.search_icon
{
    display:inline-block;
    width: 35px;
    height: 37px;
    margin-top: -40px;
    margin-bottom: -15px;
    margin-right: -50px;
    padding-left: 13px;
    padding-right: 45px;
}

/*/////////////////////////-LOGO-//////////////////////////////*/

 /* Main logo (Wrestle Hire logo) */
.site_logo
{
    display: inline;
    float: left;
    width: 180px;
    height: 145px; 
    padding-right: 50px;
    margin-bottom: -20px;
    margin-left: -30px;
    margin-top: -10px;
}

.site_logo:hover
{
    cursor: pointer;
}

/*/////////////////////////-Hiring selection - Wrestlers-//////////////////////////////*/
.option_row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

.option_container
{
    flex-basis: 20%;
    padding: 17px;
    min-width: 200px;
    transition: transform 0.5s;
    transition: 0.5s;
}

.option_container:hover
{
    transform: translateY(-3px);
    box-shadow: 0 0 15px #C6393F;
    border-radius: 3px;
}

.option_image
{
    width: 100%;
    transition: 0.5s;
}

.option_list_container
{
    margin: auto;
    padding-left: 40px;
    padding-right: 40px;
}

.option_name
{
    font-family: Bai Jamjuree;
    font-size: 1.2em;
    margin-top: -1px;
}

.rating
{
    color: #C6393F;
    margin-top: -20px;
}

<!--HTML FILE: wrestlers.html-->

<!DOCTYPE html>
<html>
    <head>
        <!--Stylesheets-->
        <link rel="stylesheet" type= "text/css" href="wrestlers.css">

        <!--Link Vue Framework-->
        <script src="https://unpkg./vue@next"></script>

        <!-- Set responsiveness to screen size -->
        <meta name="viewport" content="width=device-width, initial-scale=1">    

        <!--Google fonts-->
        <link rel="stylesheet" href="https://fonts.googleapis./css?family=Actor">
        <link rel="stylesheet" href="https://fonts.googleapis./css?family=Bai Jamjuree">
        <link rel="stylesheet" href="https://fonts.googleapis./css?family=Righteous">
        <link rel="stylesheet" href="https://fonts.googleapis./css?family=Abel">

        <!--Star icon (Font Awesome)-->
        <script src="https://use.fontawesome./d83f9b7e69.js"></script>


        <!--Page Icon-->
        <link rel="icon" href="../Assets/page_icon.png">

        <!-- Page title-->
        <title id="page-title">{{title}}</title>
    </head>
    
    <body>
        <!--NAVIGATION-->
        <header>
            <!--Top navigation section (login, account and cart)-->
            <div class = "cart_nav" id = "cart-title">
                <ul>
                    <div class = "cart_items">0</div>
                    <li><a href="#cart">{{cart_title}}<img class = "cart_icon" src="../Assets/cart.png" alt="cart_icon"></a></li>
                </ul>
            </div>

              <!--Main navigation section (main pages)-->
            <div class = "page_nav" id = "nav-titles">
                <ul>
                    <!--All main pages will have .html files, this example has the contact as a separate file (and empty files)-->
                    <a href="../Home/home.html"><img href ="../Home/home.html" class = "site_logo" id = "siteLogo" src="../Assets/website_logo.png"/></a>
                    <li><a href="../Home/home.html">{{home}}</a></li>
                    <li><a href="">{{for_hire}}</a></li>
                    <li><a href="">{{about}}</a></li>
                    <li><a href="../Contact/contact.html">{{contact_us}}</a></li>
                    <li class = "search" style="float:right"><a>{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
                </ul>
            </div>
        </header>

        <!--Wrestlers-->
        <div class = "small_container" id = "wrestler-data">
            <div class = "option_row" >
                <wrestler-choice-box id ="hire-wrestler-choice" v-for="item in items" :name="item.wrestler_name" :image="item.image_src">
                </wrestler-choice-box>
            </div>
        </div>
    </body>

    <!-- Link JavaScript file -->
    <script src="wrestlers.js"></script>
</html>

Dont mind the missing pictures, they are on my PC and are referenced in a folder

If anyone can see the issue, please mention it as I have been pulling my hair out trying to find it

Thanks :)

Share asked Sep 22, 2021 at 7:17 dwayne_d11 571 gold badge3 silver badges9 bronze badges

1 From what I am seeing you mount it to the wrong element. you try to app.mount('#hire-wrestler-choice') but in your html the element with that id is the ponent you try to call from the mount. <wrestler-choice-box id ="hire-wrestler-choice" you can try to mount it on the wrapper app.mount('#wrestler-data') – D.Schaller Commented Sep 22, 2021 at 8:00
Thank you so much, that resolved 'that error' but now I unfortunately get the error 'Property "items" was accessed during render but is not defined on instance.' – dwayne_d11 Commented Sep 22, 2021 at 8:04
try adding your ponent as a ponent to the vue instance. instead of creating an empty placeholder app const app = Vue.createApp({}) and adding the ponent there, store your ponent in a variable and add the ponent on your wrestler-data instance var WrestlerData = Vue.createApp ({...}).ponent(ponentVar).mount('#wrestler-data') – D.Schaller Commented Sep 22, 2021 at 8:13
Do you mind showing me what that may look like on my .js file i have linked, I am still a little confused (i am very new to Vue) – dwayne_d11 Commented Sep 22, 2021 at 8:19

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

Your Mounting is flawed. You referenced the wrong ID.

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

in your HTML this id is set on the ponent you try to call

<wrestler-choice-box id ="hire-wrestler-choice" v-for="item in items" :name="item.wrestler_name" :image="item.image_src">
                </wrestler-choice-box>

You have to mount it to an existing html element to get access to the ponent. e.g.:

app.mount('#wrestler-data')

EDIT:

You are using a placeholder app just to mount it. I suggest adding your ponent directly to your wrestlerData instance.

//############--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 wrestlerChoiceBox = {
  name: 'wrestler-choice-box',
  props: ['name', 'image'],
  template: `
    <div class = "option_container">
        <img class = "option_image" :src="image">
        <h4 class = "option_name">{{name}}</h4>
    </div>
    `
};

// 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"
        },
      ]
    }
  }
});
WrestlerData.ponent('wrestler-choice-box',wrestlerChoiceBox);
WrestlerData.mount('#wrestler-data');

/* Stylesheet for SIT120 Project - wrestlers.css */


/*----------------------------------------------------*/


/*/////////////////////////-NO margins-//////////////////////////////*/


/* Expands to width of screen*/

body,
html {
  margin: 0;
  padding: 0;
}


/*/////////////////////////-Header Navigation-//////////////////////////////*/


/* Top navigation (cart) */

.cart_nav ul {
  list-style-type: none;
  margin: auto;
  overflow: hidden;
  background-color: #C6393F;
}

.cart_nav li {
  float: right;
}

.cart_nav li a {
  font-family: Actor;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  padding: 15px 55px 15px 20px;
  color: white;
  display: inline-block;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
}

.cart_nav li a:hover {
  color: #AAAAAA;
}


/*/////////////////////////-Cart Number-//////////////////////////////*/


/* Cart number (circled) */

.cart_items {
  font-family: Righteous;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: #2C2C2C;
  float: right;
  margin-top: 16px;
  margin-right: 16px;
  margin-left: -33px;
  border-radius: 60%;
  width: 25px;
  height: 22px;
  text-align: center;
}


/*/////////////////////////-Cart icons-//////////////////////////////*/


/* Top navigation ICONS (cart) */

.cart_icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-bottom: -15px;
  margin-right: -17px;
  padding-left: 8px;
}


/*/////////////////////////-Main navigation-//////////////////////////////*/


/* Main navigation (pages) */

.page_nav ul {
  list-style-type: none;
  margin: auto;
  overflow: hidden;
  background-color: #2C2C2C;
}

.page_nav li {
  float: left;
}

.page_nav li a {
  font-family: Bai Jamjuree;
  font-size: 22px;
  font-weight: bold;
  padding: 15px;
  line-height: 22px;
  color: #AAAAAA;
  display: inline-block;
  padding: 40px 60px 35px 30px;
  text-decoration: none;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

.page_nav li a:hover {
  color: #FFFFFF;
}

.page_nav li a.active {
  text-decoration: overline;
  color: #FFFFFF;
}

.page_nav li a:focus {
  text-decoration: overline;
  color: #FFFFFF;
}


/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/


/* Main navigation search ICON */

.search_icon {
  display: inline-block;
  width: 35px;
  height: 37px;
  margin-top: -40px;
  margin-bottom: -15px;
  margin-right: -50px;
  padding-left: 13px;
  padding-right: 45px;
}


/*/////////////////////////-LOGO-//////////////////////////////*/


/* Main logo (Wrestle Hire logo) */

.site_logo {
  display: inline;
  float: left;
  width: 180px;
  height: 145px;
  padding-right: 50px;
  margin-bottom: -20px;
  margin-left: -30px;
  margin-top: -10px;
}

.site_logo:hover {
  cursor: pointer;
}


/*/////////////////////////-Hiring selection - Wrestlers-//////////////////////////////*/

.option_row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

.option_container {
  flex-basis: 20%;
  padding: 17px;
  min-width: 200px;
  transition: transform 0.5s;
  transition: 0.5s;
}

.option_container:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px #C6393F;
  border-radius: 3px;
}

.option_image {
  width: 100%;
  transition: 0.5s;
}

.option_list_container {
  margin: auto;
  padding-left: 40px;
  padding-right: 40px;
}

.option_name {
  font-family: Bai Jamjuree;
  font-size: 1.2em;
  margin-top: -1px;
}

.rating {
  color: #C6393F;
  margin-top: -20px;
}

<!--HTML FILE: wrestlers.html-->

<!DOCTYPE html>
<html>

<head>
  <!--Stylesheets-->
  <link rel="stylesheet" type="text/css" href="wrestlers.css">

  <!--Link Vue Framework-->
  <script src="https://unpkg./vue@next"></script>

  <!-- Set responsiveness to screen size -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--Google fonts-->
  <link rel="stylesheet" href="https://fonts.googleapis./css?family=Actor">
  <link rel="stylesheet" href="https://fonts.googleapis./css?family=Bai Jamjuree">
  <link rel="stylesheet" href="https://fonts.googleapis./css?family=Righteous">
  <link rel="stylesheet" href="https://fonts.googleapis./css?family=Abel">

  <!--Star icon (Font Awesome)-->
  <script src="https://use.fontawesome./d83f9b7e69.js"></script>


  <!--Page Icon-->
  <link rel="icon" href="../Assets/page_icon.png">

  <!-- Page title-->
  <title id="page-title">{{title}}</title>
</head>

<body>
  <!--NAVIGATION-->
  <header>
    <!--Top navigation section (login, account and cart)-->
    <div class="cart_nav" id="cart-title">
      <ul>
        <div class="cart_items">0</div>
        <li><a href="#cart">{{cart_title}}<img class = "cart_icon" src="../Assets/cart.png" alt="cart_icon"></a></li>
      </ul>
    </div>

    <!--Main navigation section (main pages)-->
    <div class="page_nav" id="nav-titles">
      <ul>
        <!--All main pages will have .html files, this example has the contact as a separate file (and empty files)-->
        <a href="../Home/home.html"><img href="../Home/home.html" class="site_logo" id="siteLogo" src="../Assets/website_logo.png" /></a>
        <li><a href="../Home/home.html">{{home}}</a></li>
        <li><a href="">{{for_hire}}</a></li>
        <li><a href="">{{about}}</a></li>
        <li><a href="../Contact/contact.html">{{contact_us}}</a></li>
        <li class="search" style="float:right"><a>{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
      </ul>
    </div>
  </header>

  <!--Wrestlers-->
  <div class="small_container" id="wrestler-data">
      <wrestler-choice-box v-for="item in items" :name="item.wrestler_name" :image="item.image_src">
      </wrestler-choice-box>
  </div>
</body>

<!-- Link JavaScript file -->
<script src="wrestlers.js"></script>

</html>

that way you can get rid off the var app and should have access to the data you need to iterate over.

Useful Links: Component Registration

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Failed to resolve component: "wrestler-choice-box" If this is a native custom element, make sure

1 Answer 1

与本文相关的文章

评论列表(0)