Property or method "value" is not defined on the instance but referenced during render

0
votes

I looked at one of the answers and tried to apply it, but then I realized it didn't work and I tried numerous things like using Vuex to calculate the years before I used it, but nothing worked.

Generate Years from 1900 to current year with VueJS

Property or method "value" 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.

Like I said, I tried using Vuex and trying to call it on the beforeCreate hook, but it didn't work.

<template>
          <md-field md-clearable>
                <label for="year">Year</label>
                <md-select v-model="year" name="year" id="year">
                    <md-option :v-for="value in values" value="value">
                        {{ value }}
                    </md-option>

                </md-select>
          </md-field>
</template>

<script>

export default {
  name: 'Component',
  data () {
     year: null
  },
  computed: {
  values () {
      const year = new Date().getFullYear()
      return Array.from({length: year - 1900}, (value, index) => 1901 + index)
    }
  }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  scoped>
</style>

I am expecting the dropdown to have years value instead of it being null and giving an error message. I also tried to rename the values, but it doesn't have to do anything with that. It's a really weird bug. I am seriously wondering if it's caused by vue.js itself.

2
vue.js
year is not defined and you're using it in v-model – Steven B.
I also tried renaming it to myear, but it didn't work. – deliguy
Yeah you need to define it. in data(){ return { myyear: null }}); – Steven B.
But it shouldn't even matter, because I replaced "year" to "value" to begin with. – deliguy
I'm not sure what you mean – Steven B.

2 Answers

0
votes

Your data property should return values:

data () {
  return {
    year: null
  }
},

And your v-for shouldn't have : in front:

  <option v-for="value in values" >
    {{ value }}
  </option>

Fix those and it should be working.

-1
votes

There are two issue in your code:

  1. Your are not using data properties correctly. You should return values inside data like this:
data () {
  return {
    year: null
  }
}
  1. You are using a : before v-for which is wrong and I think that's why you are facing the issue. Just remove that :

Hope it helps !!