Javascript 多重过滤器在AWS服务器中不工作，显示一些折旧问题，但在本地主机中工作正常。如何解决这个问题？

我对Vue js非常陌生。在用户列表页面中，有两种类型的过滤器

• 输入要搜索的关键字
• 从下拉列表中选择要搜索的位置

我可以搜索上述2个选项中的任何一个，但我需要相应地搜索这两个选项

以下是我尝试进行组合搜索的代码：

// == Enter keyword to search ==//
<input type="text" id="search" v-on:keyup="filterTable()" class="form-control" placeholder="Enter Keyword"/>
// == Enter keyword to search ==//

// == Choose Location from the dropdown to search ==//
<select class="form-control" v-model="location_filter">
  <option value="">View all locations Associated</option>
  @verbatim
     <option v-for="loc in locations" :value="loc.id">{{loc.organizationName}}</option>
  @endverbatim
</select>
// == Choose Location from the dropdown to search ==//

//== Table to show listing ==//
<b-table ref="table" :sort-compare="tableSort" class="table-light" :filter="table_filter" striped hover light bordered :items="items" :fields="fields" show-empty></b-table>
//== Table to show listing ==//

//== Vue script ==//
document.addEventListener("DOMContentLoaded", function (event) {
  window.app = new Vue({
    el: '.vue',
    methods: {
      filterTable: function (e) {
        if(e) e.preventDefault();
        this.table_filter = function (value) {
           let search_filter = $('#search').val();
           let type_filter = $('#search_type').val();
           if (search_filter != null) {
              let re = new RegExp(search_filter,"gi");
              return (app.location_filter == null || app.location_filter == "" || value.locationId == app.location_filter) && (search_filter == "" || re.test(value.name));
            } else
               return (type_filter == null || type_filter == "" || value.userType == type_filter);    
          };
        }
     },
     data: {
    location_filter: {!!$location_filter!!},
    search_filter: null,
    table_filter: null,
    locations: JSON.parse('@json($locations)'),
     }
   });
});
//== Vue script ==//

/==输入要搜索的关键字==//
//==输入要搜索的关键字==//
//==从下拉列表中选择要搜索的位置==//
查看所有关联的位置
@逐字记录
{{loc.organizationName}
@逐字结束
//==从下拉列表中选择要搜索的位置==//
//==要显示列表的表==//
//==要显示列表的表==//
//==Vue脚本==//
document.addEventListener（“DOMContentLoaded”），函数（事件）{
window.app=新的Vue({
el:“.vue”，
方法：{
filterTable:函数（e）{
如果（e）e.preventDefault（）；
this.table_filter=函数（值）{
让search_filter=$（'#search'）.val（）；
让type_filter=$（'#search_type'）.val（）；
if（搜索过滤器！=null）{
设re=newregexp（search_filter，“gi”）；
返回（app.location_filter==null | | app.location_filter==“”| | value.locationId==app.location_filter）&（search_filter==“”| | re.test（value.name））；
}否则
返回（type|filter==null || type|filter==“”| | value.userType==type|filter）；
};
}
},
数据：{
位置过滤器：{！！$location\u filter！！}，
搜索过滤器：空，
表_过滤器：空，
位置：JSON.parse（'@JSON（$locations）'），
}
});
});
//==Vue脚本==//

但是当我运行这段代码时，在localhost中它工作正常，但在AWS服务器中，它显示了错误“[BootstrapVue warn]：b-table:提供一个函数来支持“filter”是不推荐的。请改用“filter function”。“所以我也尝试了filter函数，但没有任何结果。”。然后我尝试了以下代码：

// == Enter keyword to search ==//
<input type="search" id="search" v-model="filter" class="form-control" placeholder="Enter Keyword To Search" style="margin-left: 10px;"/>
// == Enter keyword to search ==//

// == Choose Location from the dropdown to search ==//
<select class="form-control" v-model="location_filter">
  <option value="">View all locations Associated</option>
  @verbatim
     <option v-for="loc in locations" :value="loc.id">{{loc.organizationName}}</option>
  @endverbatim
</select>
// == Choose Location from the dropdown to search ==//

//== Table to show listing ==//
<b-table ref="table" class="table-light" :filter="filter" striped hover light bordered :items="items" :fields="fields" show-empty></b-table>
//== Table to show listing ==//

//== Vue script ==//
document.addEventListener("DOMContentLoaded", function (event) {
  window.app = new Vue({
    el: '.vue',
     data: {
    location_filter: {!!$location_filter!!},
    search_filter: null,
    filter: null,
    locations: JSON.parse('@json($locations)'),
     }
   });
});
//== Vue script ==//

/==输入要搜索的关键字==//
//==输入要搜索的关键字==//
//==从下拉列表中选择要搜索的位置==//
查看所有关联的位置
@逐字记录
{{loc.organizationName}
@逐字结束
//==从下拉列表中选择要搜索的位置==//
//==要显示列表的表==//
//==要显示列表的表==//
//==Vue脚本==//
document.addEventListener（“DOMContentLoaded”），函数（事件）{
window.app=新的Vue({
el:“.vue”，
数据：{
位置过滤器：{！！$location\u filter！！}，
搜索过滤器：空，
筛选器：null，
位置：JSON.parse（'@JSON（$locations）'），
}
});
});
//==Vue脚本==//

这段代码是AWS服务器上的wokring，但它只做了一次搜索，但我需要用这两个搜索。有什么建议我现在该怎么做？ 提前谢谢