变量更改时如何重新渲染 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 部分令人困惑，所以我暂时从下面的演示中删除了它）。

1. 创建一个触发 HTTP 调用的方法（按方法完成 get_books）
2. 创建一个监听器，监听sorting 值的变化。
3. 使用观察器再次触发 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

我通过将这两行添加到更改变量“排序”值的函数来解决它

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

    }