[Vue warn]: Property or method “Boston” is not defined on the instance but referenced during render

Question

I'm setting up some props, as shown below.

Component 1 (Parent):

<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>

Component 2 (Child):

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

The workstation prop renders fine, but the agency1 prop doesn't show up at all. I get this message from Vue in the console:

[Vue warn]: Property or method "Boston" 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.

I checked the docs, as it says to define it in data(), so I did a combination of all of these (probably more) to no avail:

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

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

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

If I use a number value for agency1 (<WorkStationView :workstation="1.1" :agency1="3" />), it shows! What is going on?

Also your templates look wrong, <template> must have only one child element, but you have 2 spans in it. — Alexander Kim
@AlexanderKim Yeah, they are wrapped in a div. Actually, there is a lot more than this span tags. I removed all of that for simplicity purposes in the question. — LOTUSMS

tony19 tony19 · Accepted Answer · 2019-08-17T15:10:14

:agency1="Boston" is shorthand for v-bind:agency1="Boston". It attempts to bind a data property named Boston, but you don't have one defined. :agency1="3" works because 3 is a literal. If you were attempting to assign the literal string "Boston" to agency1, don't use the preceding colon:

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

<WorkStationView agency1="Boston">

[Vue warn]: Property or method “Boston” is not defined on the instance but referenced during render

2 Answers