javascript - 在 InertiaJS（嵌套路由）中制作搜索栏组件

Question

我目前正在做我的第一个 Inertiajs 项目，并且我设法使用可以在任何地方调用的 Vue 组件创建一个可搜索列表。但是当我进入嵌套路由时，我无法让我的 url 来搜索我发送的术语：

控制器.php：

public function index($id, Request $request)
   {

       $histories = HistoryProjects::query()
            ->orderBy('name','ASC')
            ->when($request->term, function ($query, $term ){
                $query->where('name','LIKE','%' . $term . '%');})
            ->with('users')
            ->with('projects')
            ->paginate(10)
            ->withQueryString()
            ->sortBy('name');

        return Inertia::render('HistoryProjects/Index', [
       
            'histories' =>  $histories,
            'paginator' =>HistoryProjects::paginate(10)
          
         ]);
  }

我的搜索.vue：

<template>
  <div class="flex items-center">
    <div class="flex w-full bg-white shadow rounded">
       <input class="relative w-full px-6 py-3 rounded focus:ring focus:ring-yellow-600 z-0" id="search" autocomplete="on" type="text" name="search" placeholder="Buscar…&quot; :value="search" @input="$emit('update:search', $event.target.value)" />
    </div>
    <button class="ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-red-500 text-yellow-600 border-2 rounded-md p-3 bg-white" type="button" click="document.getElementByTagName('search').value = ''" @reset="$emit('delete:search', $event.target.value)">Resetear</button>
  </div>
</template>

<script>

export default {
  components: {
   
  },
  props: {
    search: {
      type: String,
      default: ''
    }
  },
   emits: ['update:search', 'delete:search'],
}
</script>

我在 vue.app 中的组件：

<search id="search" class="w-full max-w-md mr-10"  v-model:search="term" @keyup="searchFor" @click="resetQuery()">
          </search>

在我的脚本部分：

 methods: {
    
    resetQuery() {
    
      this.$inertia.replace(this.route('history.index', this.histories[0].project_id, ''))
      var inputs = document.getElementsByTagName('input');
      for (var i=0 ; i < inputs.length ; i++){
        if (inputs[i].type == "text"){
            inputs[i].value = "";
        }
      }
    },
    searchFor() {

      this.$inertia.replace(this.route('history.index', this.histories[0].project_id, {term:this.term}))
      
    }

我的网址类似于“http://mywebsite/projects/42/history”

当我在我的项目页面中搜索时，它可以正常工作：“http://mywebsite/projects?term="hi""

但是在我的嵌套历史项目中它不起作用并且我的想法已经用完了，因为重置查询实际上是有效的，但是 searchFor() 并没有对我的 url 进行任何更改。

在我的 Vue 检查器中，我看到我的名为 term 的道具正在被修改，但 url 没有改变。

提前致谢！

标签： javascriptphplaravelvue.jsinertiajs