未捕获（承诺）类型错误：无法读取 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>