在 Vue 3 中使用 v-model 在数组中搜索

【问题标题】：Searching in an array using v-model in Vue 3在 Vue 3 中使用 v-model 在数组中搜索
【发布时间】：2021-11-17 08:48:15
【问题描述】：

我正在尝试使用 Vue 3 创建一个搜索组件，以允许用户插入文本并让它显示所有可用的结果。我的代码基于此示例：https://codepen.io/thaekeh/pen/PoGJRKQ

但是，它似乎不想工作，因为我确信它与搜索栏的 v-model 有关。搜索栏似乎也是浮动的，不会停留在一个地方，所以如果有人能解决这个问题，那就太好了。

这是我到目前为止的代码（请原谅缺少图片）：

//############--search.js--############

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

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

//--------------- FOOTER ---------------//
// Vue object: Footer text
const FooterText = {
    data() {
        return {
            footer_text: 'Created by ##'
        }
    }
}

Vue.createApp(FooterText).mount('#footer-text')

//--------------- 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')


//--------------- SEARCH FUNCTION ---------------//
// Custom Vue Component: Binding information to each hiring container
const searchChoiceBox = {
    name: 'search-choice-box',
    props: ['name', 'image', 'price', 'rating'],
    template: `
      <div class = "option_container">
          <img class = "option_image" :src="image">
          <i class="fa fa-cart-plus fa-4x" id = "add_cart"></i>
          <h4 class = "option_name">{{name}}</h4>
          <h4 class = "option_price">{{price}}</h4>
          <img class = "rating" :src="rating">
      </div>
      `
};

// Vue object: Available options to search
const SearchData = Vue.createApp({
    data() {
      return {
        searchValue: '',
        options: [{
            name: 'Akira Tozawa',
            image_src: "../Assets/Wrestlers/wrestler_13.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$30/hour"
          },
          {
            name: 'Bobby Lashley',
            image_src: "../Assets/Wrestlers/wrestler_1.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$200/hour"
          },
          {
            name: 'Brock Lesnar',
            image_src: "../Assets/Wrestlers/wrestler_2.png",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$300/hour"
          },
          {
            name: 'Commander Azeez',
            image_src: "../Assets/Wrestlers/wrestler_3.png",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$40/hour"
          },
          {
            name: 'Corey Grimes',
            image_src: "../Assets/Wrestlers/wrestler_14.png",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$20/hour"
          },
          {
            name: 'Drew McIntyre',
            image_src: "../Assets/Wrestlers/wrestler_4.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$100/hour"
          },
          {
            name: 'Gran Metalik',
            image_src: "../Assets/Wrestlers/wrestler_5.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$60/hour"
          },
          {
            name: 'Jeff Hardy',
            image_src: "../Assets/Wrestlers/wrestler_6.png",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$120/hour"
          },
          {
            name: 'Jinder Mahal',
            image_src: "../Assets/Wrestlers/wrestler_15.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$50/hour"
          },
          {
            name: 'John Cena',
            image_src: "../Assets/Wrestlers/wrestler_7.png",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$900/hour"
          },
          {
            name: 'Kevin Owens',
            image_src: "../Assets/Wrestlers/wrestler_8.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$85/hour"
          },
          {
            name: 'Lince Derado',
            image_src: "../Assets/Wrestlers/wrestler_9.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$60/hour"
          },
          {
            name: 'Pete Dunne',
            image_src: "../Assets/Wrestlers/wrestler_10.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$70/hour"
          },
          {
            name: 'Sheamus',
            image_src: "../Assets/Wrestlers/wrestler_11.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$80/hour"
          },
          {
            name: 'T-Bone',
            image_src: "../Assets/Wrestlers/wrestler_16.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$30/hour"
          },
          {
            name: 'Undertaker',
            image_src: "../Assets/Wrestlers/wrestler_12.png",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$400/hour"
          },
          {
            name: 'Table',
            image_src: "../Assets/Items/table.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$50/item"
          },
          {
            name: 'Steel Chair',
            image_src: "../Assets/Items/steel_chair.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$30/item"
          },
          {
            name: 'Ladder',
            image_src: "../Assets/Items/ladder.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$100/item"
          },
          {
            name: 'Guitar',
            image_src: "../Assets/Items/guitar.jpg",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$40/item"
          },
          {
            name: 'Thumbtacks',
            image_src: "../Assets/Items/thumbtacks.jpg",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$15/item"
          },
          {
            name: 'Kendo stick',
            image_src: "../Assets/Items/kendo_stick.jpg",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$30/item"
          },
          {
            name: 'Sledgehammer',
            image_src: "../Assets/Items/sledge_hammer.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$45/item"
          },
          {
            name: 'Crutch',
            image_src: "../Assets/Items/crutch.jpg",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$25/item"
          },
          {
            name: 'Wrestling ring',
            image_src: "../Assets/Rings/wrestling_ring.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$400/ring"
          },
          {
            name: 'MMA ring',
            image_src: "../Assets/Rings/mma_ring.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$500/ring"
          },
          {
            name: 'Wrestling mat',
            image_src: "../Assets/Rings/wrestling_mat.jpg",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$50/mat"
          },
          {
            name: 'Trampoline',
            image_src: "../Assets/Rings/trampoline.jpg",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$400/item"
          },
          {
            name: 'DIY ring',
            image_src: "../Assets/Rings/diy_ring.jpg",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$30/ring"
          },
          {
            name: 'TLC match',
            image_src: "../Assets/Match type/tlc_match.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$300"
          },
          {
            name: 'Hell in a cell',
            image_src: "../Assets/Match type/hell_in_cell.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$1000"
          },
          {
            name: 'Extreme rules',
            image_src: "../Assets/Match type/extreme_rules.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$500"
          },
          {
            name: 'Backstage brawl',
            image_src: "../Assets/Match type/backstage_brawl.jpg",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$150"
          },
          {
            name: 'TLC match',
            image_src: "../Assets/Match type/royal_rumble.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$400"},
        ]};
    },

    computed: {
        searchResult() {
        let tempHire = this.options
        
        if (this.searchValue != '' && this.searchValue) {
            tempHire = tempHire.filter((item) => {
                return item.name
                  .toUpperCase()
                  .includes(this.searchValue.toUpperCase())
              })
            }
          return tempHire
        }
    }
});

SearchData.component('search-choice-box', searchChoiceBox);
SearchData.mount('#search-data');
/* Stylesheet for SIT120 Project - search.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 sub-menus-//////////////////////////////*/


/*/////////////////////////-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;
}



/*/////////////////////////-FOOTER-//////////////////////////////*/

.footer_component{ 
  border-top: solid #C6393F;
  border-width: 15px;
  background: #2C2C2C; 
  position: absolute; 
  height:100%;
  width:100%; 
  height: 130px;
  ;

}

.text_footer {
  color: #424242;
  font-family: Actor;
  font-weight: lighter;
  font-size: 18px;
  text-align: center;
  margin-top: 50px;
}

/*/////////////////////////-SEARCH BAR-//////////////////////////////*/
.search_wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #807d7d;
    max-width: 550px;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: -100px;
}

.search-bar
{
    width: 80%;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-family: Bai Jamjuree;
    font-size: 18px;
    color: #2d2d2d;
}

::placeholder {
    font-family: Abel;
    font-size: 22px;
    color: rgb(181, 179, 179);
}

.search_button
{
    background: #C6393F;
    width:10%;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.search_button .fa
{
    position: relative;
    top: -10%;
    transform: translate(50%, 50%);
    font-size: 30px;
}

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

/* Selection layout */
.option_row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10em;
}

.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;
    cursor: pointer;
}


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

/* Hiring selection information */
.option_list_container h2
{
    font-family: Rajdhani;
    font-size: 48px;
    color: #2C2C2C;
    text-align: center;
    margin: 0 auto 45px;
    position: relative;
    line-height: 60px;
    padding-top: 10px;
    color: #555;

}

.option_list_container h2::after
{
    content: '';
    background: #ff523b;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position:absolute;
    bottom: 0;
    left: 44%;
    transform: translateX(50%);
}

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

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

.rating
{
    max-width: 75px;
    display: flex;
    position: relative;
    top: -2em;
}

.option_price
{
    font-family: Bai Jamjuree;
    font-size: 0.9em;
    position: relative;
    top: -25px;
}

#add_cart
{
    color: black;
    float: right;
    transition: 0.3s;
}

#add_cart:hover
{
    color: #C6393F;
    text-shadow: 0px 0px 10px grey;
    cursor: pointer;
}
<!--HTML FILE: search.html-->

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

        <!--Link Vue Framework-->
        <script src="https://unpkg.com/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.com/css?family=Actor">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai Jamjuree">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">
        
        <!--Search icon (Font Awesome)-->
        <script src="https://use.fontawesome.com/d83f9b7e69.js"></script>

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

        <!-- Page title-->
        <title id="page-title">{{title}}</title>
    </head>
    
    <body id = "hire-now-button">
        <!--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 class = "active" href="../Home/home.html">{{home}}</a></li>
                    <li><a href="../Hiring Selection/hiring_selection.html">{{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 href = "">{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
                </ul>
            </div>
        </header>

        <!--Body for search bar and options-->
        <div id="search-data">
            <!--Search bar to find all hiring options on the site-->
            <div class="search_wrapper">
                <input type="text" class ="search-bar" v-model = "searchValue" placeholder="Search hiring options of Wrestle Hire">
                <div class = "search_button">
                    <i class="fa fa-search"></i>
                </div>
            </div>
            
            <!--All hiring options available-->
            <div class = "option_list_container">
                <div class = "option_row">
                    <search-choice-box v-for="hire in options" 
                    :name="hire.name" :image="hire.image_src" 
                    :rating="hire.star_ratings":price = "hire.list_price">
                    </search-choice-box>
                </div>
            </div>
        </div>

        <!--Footer of page-->
        <footer id = "footer-text">
            <div class="footer_component">
                <div class = "text_footer" >
                    <h2 >{{footer_text}}</h2>
                </div>
            </div>
        </footer>
        
    </body>

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

</html>

我正在使用计算属性来过滤搜索，但是我不确定这是否也有效。任何建议都会很棒，请通过更改代码来回答，因为我是 Vue 3 的新手，谢谢

【问题讨论】：

    标签： javascript html css vue.js vuejs3


    【解决方案1】：

    您的问题出现在

    `<search-choice-box v-for="hire in options" :name="hire.name" :image="hire.image_src" :rating="hire.star_ratings":price = "hire.list_price"> </search-choice-box>`

    。为什么？因为选项是一个数据，而您想要的是计算出的 searchResult 的结果。因此，您可以为此调用 v-for。您可以使用此代码

    `<search-choice-box v-for="hire in searchResult" :name="hire.name" :image="hire.image_src" :rating="hire.star_ratings":price = "hire.list_price"> </search-choice-box>`

    
//############--search.js--############

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

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

//--------------- FOOTER ---------------//
// Vue object: Footer text
const FooterText = {
    data() {
        return {
            footer_text: 'Created by ##'
        }
    }
}

Vue.createApp(FooterText).mount('#footer-text')

//--------------- 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')


//--------------- SEARCH FUNCTION ---------------//
// Custom Vue Component: Binding information to each hiring container
const searchChoiceBox = {
    name: 'search-choice-box',
    props: ['name', 'image', 'price', 'rating'],
    template: `
      <div class = "option_container">
          <img class = "option_image" :src="image">
          <i class="fa fa-cart-plus fa-4x" id = "add_cart"></i>
          <h4 class = "option_name">{{name}}</h4>
          <h4 class = "option_price">{{price}}</h4>
          <img class = "rating" :src="rating">
      </div>
      `
};

// Vue object: Available options to search
const SearchData = Vue.createApp({
    data() {
      return {
        searchValue: '',
        options: [{
            name: 'Akira Tozawa',
            image_src: "../Assets/Wrestlers/wrestler_13.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$30/hour"
          },
          {
            name: 'Bobby Lashley',
            image_src: "../Assets/Wrestlers/wrestler_1.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$200/hour"
          },
          {
            name: 'Brock Lesnar',
            image_src: "../Assets/Wrestlers/wrestler_2.png",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$300/hour"
          },
          {
            name: 'Commander Azeez',
            image_src: "../Assets/Wrestlers/wrestler_3.png",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$40/hour"
          },
          {
            name: 'Corey Grimes',
            image_src: "../Assets/Wrestlers/wrestler_14.png",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$20/hour"
          },
          {
            name: 'Drew McIntyre',
            image_src: "../Assets/Wrestlers/wrestler_4.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$100/hour"
          },
          {
            name: 'Gran Metalik',
            image_src: "../Assets/Wrestlers/wrestler_5.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$60/hour"
          },
          {
            name: 'Jeff Hardy',
            image_src: "../Assets/Wrestlers/wrestler_6.png",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$120/hour"
          },
          {
            name: 'Jinder Mahal',
            image_src: "../Assets/Wrestlers/wrestler_15.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$50/hour"
          },
          {
            name: 'John Cena',
            image_src: "../Assets/Wrestlers/wrestler_7.png",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$900/hour"
          },
          {
            name: 'Kevin Owens',
            image_src: "../Assets/Wrestlers/wrestler_8.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$85/hour"
          },
          {
            name: 'Lince Derado',
            image_src: "../Assets/Wrestlers/wrestler_9.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$60/hour"
          },
          {
            name: 'Pete Dunne',
            image_src: "../Assets/Wrestlers/wrestler_10.png",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$70/hour"
          },
          {
            name: 'Sheamus',
            image_src: "../Assets/Wrestlers/wrestler_11.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$80/hour"
          },
          {
            name: 'T-Bone',
            image_src: "../Assets/Wrestlers/wrestler_16.png",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$30/hour"
          },
          {
            name: 'Undertaker',
            image_src: "../Assets/Wrestlers/wrestler_12.png",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$400/hour"
          },
          {
            name: 'Table',
            image_src: "../Assets/Items/table.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$50/item"
          },
          {
            name: 'Steel Chair',
            image_src: "../Assets/Items/steel_chair.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$30/item"
          },
          {
            name: 'Ladder',
            image_src: "../Assets/Items/ladder.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$100/item"
          },
          {
            name: 'Guitar',
            image_src: "../Assets/Items/guitar.jpg",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$40/item"
          },
          {
            name: 'Thumbtacks',
            image_src: "../Assets/Items/thumbtacks.jpg",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$15/item"
          },
          {
            name: 'Kendo stick',
            image_src: "../Assets/Items/kendo_stick.jpg",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$30/item"
          },
          {
            name: 'Sledgehammer',
            image_src: "../Assets/Items/sledge_hammer.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$45/item"
          },
          {
            name: 'Crutch',
            image_src: "../Assets/Items/crutch.jpg",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$25/item"
          },
          {
            name: 'Wrestling ring',
            image_src: "../Assets/Rings/wrestling_ring.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$400/ring"
          },
          {
            name: 'MMA ring',
            image_src: "../Assets/Rings/mma_ring.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$500/ring"
          },
          {
            name: 'Wrestling mat',
            image_src: "../Assets/Rings/wrestling_mat.jpg",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$50/mat"
          },
          {
            name: 'Trampoline',
            image_src: "../Assets/Rings/trampoline.jpg",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$400/item"
          },
          {
            name: 'DIY ring',
            image_src: "../Assets/Rings/diy_ring.jpg",
            star_ratings: "../Assets/Ratings/2_stars.png",
            list_price: "$30/ring"
          },
          {
            name: 'TLC match',
            image_src: "../Assets/Match type/tlc_match.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$300"
          },
          {
            name: 'Hell in a cell',
            image_src: "../Assets/Match type/hell_in_cell.jpg",
            star_ratings: "../Assets/Ratings/5_stars.png",
            list_price: "$1000"
          },
          {
            name: 'Extreme rules',
            image_src: "../Assets/Match type/extreme_rules.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$500"
          },
          {
            name: 'Backstage brawl',
            image_src: "../Assets/Match type/backstage_brawl.jpg",
            star_ratings: "../Assets/Ratings/3_stars.png",
            list_price: "$150"
          },
          {
            name: 'TLC match',
            image_src: "../Assets/Match type/royal_rumble.jpg",
            star_ratings: "../Assets/Ratings/4_stars.png",
            list_price: "$400"},
        ]};
    },

    computed: {
        searchResult() {
        let tempHire = this.options
        
        if (this.searchValue != '' && this.searchValue) {
            tempHire = tempHire.filter((item) => {
                return item.name
                  .toUpperCase()
                  .includes(this.searchValue.toUpperCase())
              })
            }
          return tempHire
        }
    }
});

SearchData.component('search-choice-box', searchChoiceBox);
SearchData.mount('#search-data');

    /* Stylesheet for SIT120 Project - search.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 sub-menus-//////////////////////////////*/


/*/////////////////////////-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;
}



/*/////////////////////////-FOOTER-//////////////////////////////*/

.footer_component{ 
  border-top: solid #C6393F;
  border-width: 15px;
  background: #2C2C2C; 
  position: absolute; 
  height:100%;
  width:100%; 
  height: 130px;
  ;

}

.text_footer {
  color: #424242;
  font-family: Actor;
  font-weight: lighter;
  font-size: 18px;
  text-align: center;
  margin-top: 50px;
}

/*/////////////////////////-SEARCH BAR-//////////////////////////////*/
.search_wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #807d7d;
    max-width: 550px;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: -100px;
}

.search-bar
{
    width: 80%;
    padding: 15px 20px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-family: Bai Jamjuree;
    font-size: 18px;
    color: #2d2d2d;
}

::placeholder {
    font-family: Abel;
    font-size: 22px;
    color: rgb(181, 179, 179);
}

.search_button
{
    background: #C6393F;
    width:10%;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.search_button .fa
{
    position: relative;
    top: -10%;
    transform: translate(50%, 50%);
    font-size: 30px;
}

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

/* Selection layout */
.option_row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10em;
}

.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;
    cursor: pointer;
}


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

/* Hiring selection information */
.option_list_container h2
{
    font-family: Rajdhani;
    font-size: 48px;
    color: #2C2C2C;
    text-align: center;
    margin: 0 auto 45px;
    position: relative;
    line-height: 60px;
    padding-top: 10px;
    color: #555;

}

.option_list_container h2::after
{
    content: '';
    background: #ff523b;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position:absolute;
    bottom: 0;
    left: 44%;
    transform: translateX(50%);
}

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

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

.rating
{
    max-width: 75px;
    display: flex;
    position: relative;
    top: -2em;
}

.option_price
{
    font-family: Bai Jamjuree;
    font-size: 0.9em;
    position: relative;
    top: -25px;
}

#add_cart
{
    color: black;
    float: right;
    transition: 0.3s;
}

#add_cart:hover
{
    color: #C6393F;
    text-shadow: 0px 0px 10px grey;
    cursor: pointer;
}


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

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

        <!--Link Vue Framework-->
        <script src="https://unpkg.com/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.com/css?family=Actor">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai Jamjuree">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">
        
        <!--Search icon (Font Awesome)-->
        <script src="https://use.fontawesome.com/d83f9b7e69.js"></script>

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

        <!-- Page title-->
        <title id="page-title">{{title}}</title>
    </head>
    
    <body id = "hire-now-button">
        <!--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 class = "active" href="../Home/home.html">{{home}}</a></li>
                    <li><a href="../Hiring Selection/hiring_selection.html">{{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 href = "">{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
                </ul>
            </div>
        </header>

        <!--Body for search bar and options-->
        <div id="search-data">
            <!--Search bar to find all hiring options on the site-->
            <div class="search_wrapper">
                <input type="text" class ="search-bar" v-model = "searchValue" placeholder="Search hiring options of Wrestle Hire">
                <div class = "search_button">
                    <i class="fa fa-search"></i>
                </div>
            </div>
            
            <!--All hiring options available-->
            <div class = "option_list_container">
                <div class = "option_row">
                    <search-choice-box v-for="hire in searchResult" 
                    :name="hire.name" :image="hire.image_src" 
                    :rating="hire.star_ratings":price = "hire.list_price">
                    </search-choice-box>
                </div>
            </div>
        </div>

        <!--Footer of page-->
        <footer id = "footer-text">
            <div class="footer_component">
                <div class = "text_footer" >
                    <h2 >{{footer_text}}</h2>
                </div>
            </div>
        </footer>
        
    </body>

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

</html>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2022-01-08
      • 2019-09-25
      • 2021-06-18
      • 1970-01-01
      • 2016-11-12
      • 2021-08-19
      • 2020-03-12
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode