Laravel vue 惯性创建分页搜索时出错

Question

我是使用 Laravel 8 与 vuejs 和 inertiajs 的初学者。我正在尝试进行分页搜索 table。我正在按照教程来实现这一点，但我遇到了错误。

这是我从 vue 绑定的输入类型：

<input type="text" name="table_search" class="form-control float-right" placeholder="Search" v-model="term" @keyup="search">

这是我来自 vue 的整个脚本：

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import Paginator from "@/Components/Paginator";

    export default {
        data() {
          return {
            term: ''
          }
        },

        props: {
          members:Object,
          filters: Object
        },

        components: {
            AppLayout,
            Paginator,
            // JetPagination
        },

        methods: {
          search() {
            this.$inertia.replace(this.$route('member.index', {term: this.term}))
          }
        }


    }
</script>

现在在我的 laravel 控制器中，这是我从教程中遵循的内容：

public function index(Request $request)
    {           
        return Inertia::render('Members/Member', [
            'members' => Member::with('user')->when($request->term, function($query, $term) {
                $query->where('firstname', 'LIKE', '%'.$term.'%');
            })->paginate()
        ]);
    }

我的控制台中有一个 issues/warning/error：

[Vue warn]: Unhandled error during execution of native event handler 
Uncaught TypeError: this.$route is not a function

Answer 1

基于documentation

你应该这样做：

export default {

  data() {
     term: '',
     routes: {{ json_encode($routes) }}
  }

  ...

  methods: {
    search() {
      this.$inertia.replace(this.routes('member.index', {term: this.term}))
    }
  }
}

然后您应该 json_encode 传递给您的数据并访问它。

Laravel vue 惯性创建分页搜索时出错

Error in Laravel vue inertia creating search with pagination

inertiajs

laravel

vue.js