[Vue警告]:属性或方法“ Boston”未在实例上定义,但在渲染期间被引用

时间:2019-08-17 14:59:45

标签: vue.js vuejs2 vue-component

我正在设置一些道具,如下所示。

组件1(父级):

<template>
  <div>
    <span>{{agency1}}</span>
    <span>{{workstation}}</span>
  </div>
</template>

<script>
export default {
  name: "work-station-view",
  props: {
    agency1: {
      type: String
    },
    workstation: {
      type: Number
    }
  },
  data() {
    return {};
  }
};
</script>

组件2(子级):

<template>
  <WorkStationView :workstation="1.1" :agency1="Boston" />
</template>

workstation道具可以很好地显示,但是agency1道具根本不显示。我从控制台中的Vue收到此消息:

  

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

我检查了文档,并说要在data()中对其进行定义,所以我将所有这些文档(可能更多)组合了起来,但无济于事:

// attempt 1
data() {
  agency1 = this.agency1;
  return {};
}

// attempt 2
data() {        
  return {
    agency1 = this.agency1;
  };
}

// attempt 3
data() {       
  return {
    agency1: '';
  };
}

如果我为agency1<WorkStationView :workstation="1.1" :agency1="3" />)使用一个数字值,它将显示!发生了什么事?

2 个答案:

答案 0 :(得分:2)

:agency1="Boston"v-bind:agency1="Boston"的{​​{3}}。它尝试绑定名为Boston的数据属性,但是您没有定义一个。 :agency1="3"之所以有效,是因为3是一个文字。如果您试图将文字字符串“ Boston”分配给agency1,请不要使用前面的冒号:

<!--
<WorkStationView :agency1="Boston">
--> <!-- DON'T DO THIS -->

<WorkStationView agency1="Boston">

答案 1 :(得分:2)

如果您使用内联字符串,则应跳过:或用引号引起来。

:v-bind的缩写,在将属性从父组件传递给子组件时,应与要绑定的变量一起使用。在这种情况下,您在父上下文中没有名为Boston的变量,因此来自Vue的错误。

如果您只想使用Boston之类的常量字符串,就可以像
 <WorkstationView :workstation="1.1" :agency="'Boston'" />

或者,如果您执行以下操作,它也将起作用:

<WorkstationView :workstation="1.1" agency="Boston" />