Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null

Question

我正在为具有 Laravel、Inertia.js 和 Vue.js 的项目模型创建搜索栏。

控制器

public function index(Request $request)
{
    return Inertia::render('Projects/Index', [
        'projects' => Project::where('project_name', 'LIKE', '%' . 
            $request->search . '%')
            ->paginate(7)
    ]);
}

Index.vue模板

<input id="search" type="text" class="form-input" placeholder="Search..." 
    v-model="search" @keyup="searchProject">

脚本

data(){
      return {
          search: ''
      }
  },

methods: {
      searchProject: _.throttle(function(){
          this.$inertia.get("/projects", { search: this.search }, 
          { preserveState: true });
      },200)
  }

每当我在搜索输入中键入任何内容时，没有任何内容呈现，并且我在控制台中收到以下错误。

我读到这可能是我的 vue 版本引起的，在 package.json 我有：

@vue/compiler-sfc": "^3.0.5",
"vue": "^3.0.5",

Answer 1

我刚刚解决了这个问题。对于遇到此问题或类似问题的任何人。这是一个可能的解决方案。当搜索结果为空时，DOM 正在尝试呈现 Null 对象。因此，将所有内容包装在一个：

<div v-if="projects.data">
  Your Logic here
</div>

<div v-else>
     Empty Prop
</div>

Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null

Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null

javascript

inertiajs

laravel

vue.js