JavaScript-在数组中使用VUE3-Stack Overflow中的v-model进行搜索

顺晟科技

2022-10-19 12:36:16

209

我试图使用VUE3创建一个搜索组件，允许用户插入文本并让它显示所有可用的结果。我的代码基于以下示例:https://codepen.io/thaekeh/pen/pogjrkq

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

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

我正在使用一个computed属性来过滤搜索，但我不确定这是否有效。任何建议都是很好的，请通过修改代码来回答，因为我对VUE3非常陌生，谢谢

顺晟科技：

在

中发现了您的问题

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

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

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

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

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

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

上一篇：JavaScript-如何限制int 下一篇：HTML-移除导航栏和下拉菜单之间空

网站建设

Html

JavaScript-在数组中使用VUE3-Stack Overflow中的v-model进行搜索