Ever had a component grow way out of control, eventually becoming so daunting that no one wants to touch it? Don't worry, you're not alone! Usually when that happens, it's because the component is just doing too much.
For example, we might start with a simple search page:
… embedded demo ...
In the demo above, users can enter a query for a product, press enter to run the search, then see the results. Looking at the code though, even this"simple" component is not trivial:
<script>/** @file components/product-search.vue */
import axios from 'axios'
export default { data() { return { productSearch: { query: '', results: [] } } }, methods: { runProductSearch() { this.productSearch.results = [] axios .get('/api/products', { params: { query: this.productSearch.query } }) .then(response => { this.productSearch.results = response.data.products }) } }}</script>
<template> <div> <input v-model="productSearch.query" @keydown.enter="runProductSearch" /> <ProductList v-if="productSearch.results.length > 0" :products="productSearch.results" />