Vue CLI 错误:实例上未定义属性或方法“数据”

Posted

技术标签:

【中文标题】Vue CLI 错误:实例上未定义属性或方法“数据”【英文标题】:Vue CLI error: Property or method "data" is not defined on the instance 【发布时间】:2020-07-14 00:21:02 【问题描述】:

在尝试从本地 JSON 呈现数据时,我在 Vue 项目中遇到了一个问题。我已阅读说明并遵循它们——每一步——但错误仍然存​​在。由于我是 Vue 和高级编程本身的新手,因此我寻求帮助。

english.json


  "0": 
    "text": "This be a square",
    "color": "blue",
    "size": "small"
  ,
  "1": 
    "text": "here lies a square",
    "color": "red",
    "size": "medium"
  ,
  "2": 
    "text": "Tharr be a squaree",
    "color": "black",
    "size": "large"
  

ExperienceText.vue

<template>
  <article class="content__box" :v-for="data in expJson">
    data.text
    <h6>data.text</h6>
    <h3>data.color</h3>
    <p>data.size</p>
  </article>
</template>
<script>
import json from "@/components/json/english.json";
export default 
  name: "ExperienceText",
  data() 
    return 
      expJson: json
    ;
  
;
</script>

错误

[Vue 警告]:属性或方法“数据”未在实例上定义,但在渲染期间被引用。通过初始化该属性,确保该属性是反应性的,无论是在数据选项中,还是对于基于类的组件。请参阅:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

found in

---> <ExperienceText> at src/components/mainComp/subComp/ExperienceText.vue
       <ExperienceSection> at src/components/mainComp/ExperienceSection.vue
         <Experience> at src/components/mainComp/Experience.vue
           <Main> at src/components/Main.vue
             <Container> at src/views/Container.vue
               <App> at src/App.vue
                 <Root>

Show 60 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <ExperienceText> at src/components/mainComp/subComp/ExperienceText.vue
       <ExperienceSection> at src/components/mainComp/ExperienceSection.vue
         <Experience> at src/components/mainComp/Experience.vue
           <Main> at src/components/Main.vue
             <Container> at src/views/Container.vue
               <App> at src/App.vue
                 <Root>

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"

found in

---> <ExperienceText> at src/components/mainComp/subComp/ExperienceText.vue
       <ExperienceSection> at src/components/mainComp/ExperienceSection.vue
         <Experience> at src/components/mainComp/Experience.vue
           <Main> at src/components/Main.vue
             <Container> at src/views/Container.vue
               <App> at src/App.vue
                 <Root>

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'text' of undefined
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"db619a62-vue-loader-template"!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/mainComp/subComp/ExperienceText.vue?vue&type=template&id=088f3b1e& (app.js:1089), <anonymous>:15:36)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5978)
    at createElm (vue.runtime.esm.js?2b0e:5925)

JSON 到达

在我的应用程序中,文章标签根本不可见。我很确定这是因为 JSON 数据没有正确呈现。我该如何解决这个问题?

【问题讨论】:

去掉v-for前面的: 2:3 错误模板根不允许'v-for'指令|我被退回了这个问题。并且,因此编译失败。 vuejs.org/v2/guide/components.html#A-Single-Root-Element 我阅读了链接文章似乎还可以,在 v-for 之前没有 :,但是当我在我的代码中这样做时,我会遇到以下问题 2:3 error The template root disallows 'v-for' directives vue/valid-template-root 2:3 error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key ` 2:32 错误解析错误:missing-whitespace-between-attributes vue/no-parsing-error 2:32 错误解析错误:unexpected-character-in-attribute-name vue/no-解析错误 7:4 警告解析错误:意外的结束标记“文章”。当标签已被另一个标签关闭时,可能会发生这种情况。有关更多信息,请参阅w3.org/TR/html5/…prettier/prettier` ✖ 5 个问题(4 个错误,1 个警告) 【参考方案1】:

首先,从v-for 中删除:,因为它是指令而不是绑定。

<article class="content__box" v-for="data in expJson">

您还需要在所有 v-for 元素上使用 :key。由于您的数据没有唯一标识符,我们可以使用索引:

<article class="content__box" v-for="(data, index) in expJson" :key="index">

此外,这仍然会产生错误,因为所有组件都必须具有 one root element 和 v-for 可能会创建多个根元素。您可以将所有内容包装在一个 div 中:

<template>
  <div>
    <article class="content__box" v-for="(data, index) in expJson" :key="index">
      data.text
      <h6>data.text</h6>
      <h3>data.color</h3>
      <p>data.size</p>
    </article>
  </div>
</template>

【讨论】:

不客气。由于您是该网站的新手,我会提到,如果您认为它解决了您的问题,您可以接受答案(如果您不接受我的答案,则没有压力)。你可以这样做:i.stack.imgur.com/QpogP.png 好的,谢谢。【参考方案2】:

希望这会有所帮助。

:v-for 中删除: 冒号

const yourJson = 
  "0": 
    "text": "This be a square",
    "color": "blue",
    "size": "small"
  ,
  "1": 
    "text": "here lies a square",
    "color": "red",
    "size": "medium"
  ,
  "2": 
    "text": "Tharr be a squaree",
    "color": "black",
    "size": "large"
  


new Vue(
  el: '#app',
  data() 
    return 
      expJson: yourJson,
    ;
  ,
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <article class="content__box" v-for="data in expJson" :style="backgroundColor: data.color" style="color: white; padding: 10px">
    data.text
    <h6>data.text</h6>
    <h3>data.color</h3>
    <p>data.size</p>
  </article>
</div>

【讨论】:

感谢您的帮助。你能帮我了解一下 cli Project 语法吗,因为我猜想实现与链接 vue.js 不同。我尝试将 vue.cli 添加到标签中,但由于我是新手,我的声誉不足以在堆栈溢出中创建新标签。 @AjayaBajracharya,好的。在 Skype 上联系我 syed_haroon

以上是关于Vue CLI 错误:实例上未定义属性或方法“数据”的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js:实例上未定义属性或方法

Vue警告:实例上未定义属性“搜索”

使用 vuex 和 vue 路由器的实例上未定义属性或方法“X”

带有 v-for 的 Vue 内联模板 - 未定义

Laravel 刀片中的 Vue 错误:属性或方法“类型”未在实例上定义,但在渲染期间引用

Vue js错误:属性或方法“smoothie”未在实例上定义,但在渲染期间引用