Mi búsqueda está funcionando, pero necesito presionar la tecla Intro para obtener resultados. Quiero agregar la opción de tener resultados con un botón también. Busque resultados presionando Intro o haciendo clic en el botón. ¿Alguien puede ayudarme?
<div class="search-box"> <input type="text" class="search-bar" placeholder="Search..." v-model="query" @keypress="fetchWeather" /> <button>Click Me!</button> </div> methods: { fetchWeather (e) { if (e.key == "Enter") { fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`) .then(res => { return res.json(); }).then(this.setResults); } }, setResults (results) { this.weather = results; }Puede usar @keyup.enter="fetchWeather" para la entrada y @click="fetchWeather" para el botón.
Debería funcionar bien si simplemente agrega @click="fetchWeather" dentro de la etiqueta del botón, así:
<button @click="fetchWeather">Haz clic en mí"
Prueba esto :
new Vue({ el: '#app', data: { query: null, queryData: ['search1', 'search2', 'search3', 'search4'], searchedData: [] }, mounted() { this.searchedData = [...this.queryData] }, methods: { fetchWeather() { if (!this.query) return; this.searchedData = this.queryData.filter(item => item.includes(this.query)) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="text" class="search-bar" placeholder="Search..." v-model="query" @keyup.enter="fetchWeather" /> <button @click="fetchWeather">Click Me!</button> <ul> <li v-for="(item, index) in searchedData" :key="index"> {{ item }} </li> </ul> </div>