To finish off our product catalog, we're going to add a basic search bar to give our users even more control over the product list they're browsing. Let's start by creating a new component named SearchBar.vue in the ClientApp/components/catalogue directory. The template section for this component is very simple:
<template> <div> <b-form-input :value="query" type="text" placeholder="Search..." @change="update" @keyup.enter.native="search"> </b-form-input> </div></template>
All we're rendering is a text input field, with a few standard attributes such as a placeholder of "Search…". However, usually, we would use the v-model directive on text inputs, so why are we binding the value of the text input here instead? ...
