Vue组合API：在中访问JSON属性< template>将引发错误

iswrvxsc 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(173)

我正在学习vue的合成API。我想我掌握了它是如何工作的，但我得到了一个错误的控制台，我正在与之斗争。这就是错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'FirstName')
at Proxy._sfc_render (PersonView.vue:22:27)
at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5649:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
at instance.update (runtime-core.esm-bundler.js:5763:56)
at setupRenderEffect (runtime-core.esm-bundler.js:5777:9)
at mountComponent (runtime-core.esm-bundler.js:5559:9)
at processComponent (runtime-core.esm-bundler.js:5517:17)
at patch (runtime-core.esm-bundler.js:5119:21)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5729:17)

这就是代码：

<script>
import axios from 'axios'
import { onBeforeMount, reactive } from 'vue'

export default {
  setup() {
    const dataPerson = reactive({})

    onBeforeMount(() => {
      axios.get("some URL").then((response) => {dataPerson.value = response.data})
        .catch((error) => {console.log(error)})
    })

    return {
      dataPerson
    }
  }
}
</script>

<template>
  <h1>{{ dataPerson.value.FirstName }}</h1>
</template>

<style></style>

我不明白为什么我会得到这个错误，因为h1标签将被正确显示，并且浏览器正在显示JSON的FirstName属性。JSON看起来像这样：

{ "UID_Person": "A1", "LastName": "TestLastName", "FirstName": "TestFirstName", "Birthdate": "1995-11-05" }

vue.js

来源：https://stackoverflow.com/questions/76240200/vue-composition-api-accessing-json-properties-intemplate-will-throw-an-error

1条答案

按热度按时间

vcirk6k61#

您正在使用reactive，它不会像ref那样将值 Package 在具有value属性的对象中。因此，.value当然是undefined，你不能访问它上的任何东西。只需删除.value，就可以了。
您的代码将变为：

<template>
  <h1>{{ dataPerson.FirstName }}</h1>
</template>

然而，即使你**使用ref，你仍然不需要在模板中使用.value，因为在模板中，引用是自动展开的。
如链接文档中所述，这种解包“仅适用于ref是模板渲染上下文的顶级属性时”。即，作为ref的变量将被解包，但作为对象属性的ref将不解包。在这些情况下，您需要使用.value。
除非“它是文本插值的最终评估值（即a {{ }}标签）"：

const object = { foo: ref(1) }

<template>
{{ object.foo }}
</template>

“这只是文本插值的一个方便功能，相当于{{ object.foo.value }}。”

赞(0）回复(0）举报 2023-05-18

我来回答

Vue组合API：在中访问JSON属性< template>将引发错误

1条答案

相关问题

热门标签

最新问答