Vue Warn: Property or method is not defined on the instance but referenced during render

user_16749604 0
Viewed 734

I have a model name defined in my Component tag as seen below:

 <b-table-column v-if="" field="columnName" v-slot="itemProps">
              <SelectableAttribute
                  :attr-name="props2.row.fieldClass"
                  :attr-id="itemProps.row.id"
                  :model-id="props.row.id"
                  :model-name="NewParticipant"
              >

However I receive this error:

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

I'm not quite sure how I'm meant to define a model-name, in my props I assume but where? I've attached code below.

    export default {
  props: {
    participants:
        {
          type: Array,
          default: null
        },
  },

  components: {
    SelectableAttribute
  },
vuejs2 vue.js
1 Answers

As your error tells you, NewParticipant is not defined. You need to add it to your component as a property in data(), like this:

data() {
    return {
      NewParticipant: [] // Array for example
    }
  }

Or else, if you want your prop participants to be the model-name, you need to change it to :model-name="participants".

user_131293530
Related