未捕获（承诺中）类型错误：无法读取 null 的属性“insertBefore”答案

【问题标题】：Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null未捕获（承诺中）类型错误：无法读取 null 的属性“insertBefore”
【发布时间】：2021-09-25 00:53:33
【问题描述】：

我正在使用 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",

【问题讨论】：

我认为这与您如何呈现这些结果有关？

标签： javascript laravel vue.js inertiajs

【解决方案1】：

我刚刚解决了这个问题。对于遇到此问题或类似问题的任何人。这是一个可能的解决方案。当搜索结果为空时，DOM 正在尝试渲染 Null 对象。所以，把所有东西都包装在一个：

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

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

【讨论】：

所以不清楚你做了什么来解决这个问题。你也碰巧有一个小项目来显示错误。我遇到了类似的问题，但在一个大项目上，希望看到提交给 Vuejs 的错误
也可能是 VueJS 版本，在我从事这个项目时，我使用的是 Vue 2，原始问题中的相同代码在 Vue 3 上运行良好，但不确定。
我在 Vue3 上，发现使用 v-if 存在一些内部问题。当我遇到它时，我不得不在某些情况下更改为 v-show