[Vue warn]：属性或方法“search”未在实例上定义，但在渲染期间引用

Question

我的控制台中出现此错误，我只是无法理解出了什么问题：

我收到这条消息： Vue warn]：属性或方法“search”未在实例上定义，但在渲染期间引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

'search'

在数据中定义并在

v-model

中使用，如下所示：

<template>
 <v-text-field
  v-model="search"
  :placeholder="$t(label)"
  outlined
  @input="handleSearch"
  maxlength="50"
 >
</template>

<script lang="ts">
 data: function () {
   return {
    search: "",
    newItem: "",
   };
 }
</script>

Answer 1

如果你使用 options api，你应该这样做：

export default {
  data() {
    return { a: 1 }
  },
  created() {
    console.log(this.a) // 1
    console.log(this.$data) // { a: 1 }
  }
}

但是如果你想使用组合，那么你应该这样做：

<script lang="ts" setup>
export default {
  data() {
    return { a: 1 }
  },
  created() {
    console.log(this.a) // 1
    console.log(this.$data) // { a: 1 }
  }
}
</script>

在您的代码中，选项 api 数据未包装到

export default

函数，因此当应用程序呈现时，它会返回

undefined