如何在变量更改时重新渲染 vue.js 组件

Question

我有一个 Vue 组件，可以从后端加载书籍数据，然后将其放入卡片中。

我想允许用户将书籍的排序从默认更改为按评级或最新等，所以我声明了一个变量名 sorting 并设置为默认并添加了一个下拉菜单更改默认的变量排序，并将变量放入从后端获取数据的 URL 中，如 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++;

    },

后端：- web.php

Route::get('/load_all_audio_books/{sort}',[\App\Http\Controllers\load_book::class,'get_all_audiobooks']);

后端函数：-

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;
    }

现在我想要的是在变量排序发生变化时重新渲染组件。

Answer 1

如果你想在后端执行排序，你已经完成了一半（我发现 page 部分令人困惑，所以我暂时将其从下面的演示中删除）。

创建一个触发 HTTP 调用的方法（每个方法完成 get_books）
创建一个侦听 sorting 值变化的观察者。
再次使用观察器触发 HTTP 调用

<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>

观察者是一种解决方案。您可以通过多种不同的方式执行此操作。

Answer 2

我通过将这两行添加到更改变量“sorting”值的函数中解决了这个问题

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();
       

    }

如何在变量更改时重新渲染 vue.js 组件

how to re-render a vue.js component when a variable change

javascript

vue.js

vue-component