Tengo un componente Vue que carga los datos de los libros desde el back-end y luego los coloca en las tarjetas.
Quería permitir que el usuario cambiara la clasificación de los libros de forma predeterminada a por calificación o al más nuevo, etc., así que declaré una sorting de nombre de variable y la configuré como predeterminada y agregué un menú desplegable para cambiar la clasificación de variable de forma predeterminada, y coloque la variable en la URL que obtiene los datos del back-end como en el método get_books :
data(){ return { audio_books:[], page:1, last_page:false, sorting:"default", } }, methods: { get_books() { axios.get('load_all_audio_books/'+this.sorting+'?page='+this.page).then(response=> { $.each(response.data.data, (key, v) => { this.audio_books.push(v); if (response.data.current_page==response.data.last_page){ this.last_page=true; } }); }) this.page++; },el back-end :- web.php
Route::get('/load_all_audio_books/{sort}',[\App\Http\Controllers\load_book::class,'get_all_audiobooks']);la función de back-end: -
public function get_all_audiobooks($sort) { if($sort=="default") { $books=DB::table('audio_books')->paginate(10); return $books; } elseif ($sort=="rate") { $books=DB::table('audio_books')->orderBy('rating','desc')->paginate(10); return $books; } elseif ($sort=="newest") { $books=DB::table('audio_books')->orderBy('created_at','desc')->paginate(10); return $books; } elseif ($sort=="oldest") { $books=DB::table('audio_books')->orderBy('rating')->paginate(10); return $books; }ahora lo que quiero es volver a renderizar el componente cada vez que cambie la clasificación de variables.
Si desea realizar la clasificación en el backend, está a mitad de camino (encontré la parte de la page confusa, así que la eliminé temporalmente de mi demostración a continuación).
get_books )sorting . <template> <!-- Other stuff --> <select v-model="sorting"> <option value="prop1">Prop 1</option> <option value="prop2">Prop 2</option> </select> <!-- Other stuff --> </template> <script> watch: { sorting(newVal, oldVal) { this.get_books(newVal) } }, mounted() { this.get_books(this.sorting) }, methods: { get_books(sort) { axios.get(`load_all_audio_books/${sort`).then(response=> { $.each(response.data.data, (key, v) => { this.audio_books.push(v); if (response.data.current_page==response.data.last_page){ this.last_page=true; } }); }) }, } </script>Los vigilantes son una solución. Puedes hacer esto de varias maneras diferentes.
Lo resolví agregando estas dos líneas a la función que cambia el valor de la variable "ordenar"
change_sort(sort) { this.page=1; this.sorting=sort; //the first line empty the audio_books array this.audio_books=[]; //the second line call the function that get the data from the //back end with the new sorting value then repopulate the //audio_books array with the new values this.get_books(); }