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

Posted 2023-02-23

【中文标题】变量更改时如何重新渲染 vue.js 组件

【英文标题】：how to re-render a vue.js component when a variable change

【发布时间】：2022-01-17 03:46:36

【问题描述】：

我有一个 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;
    

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

【参考方案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>

观察者是一种解决方案。您可以通过多种不同的方式做到这一点。

【参考方案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();
       

    

【讨论】：

虽然您的解决方案是正确的，但效率不高。您正在添加另一种不需要的方法。话虽如此，如果它对您有意义，那么我会使用它:)