CODEWITHSUNDEEP
vue.js
user11092881
user11092881

Reputation:

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

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://v2.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.

Upvotes: 1

Views: 17650

Answers (4)

Shreeraj
Shreeraj

Reputation: 767

There are two mistakes in your code.

First one is:

<md-option v-for="(val,index) in values" :key="index" :value="val">
  {{ value }}
</md-option>
  1. You need to make the value attribute reactive to consider the dynamic values from the v-for loop.
  2. Always use :key attribute while using v-for.
  3. There should not be : as prefix of v-for.
  4. Try to keep variable names different from the attributes for better code understanding.

Second one is:

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

You were missing to return in the data() object.

Upvotes: 1

Pranavan
Pranavan

Reputation: 211

The reason behind the previous error is that you most probably forgot to define the prop XXX in the data object of your Vue application:

var application = new Vue({
    el: '#app',
    data: {
        // The prop XXX is not defined here, so add it ;)
    }
});

Upvotes: 3

Nipun Jain
Nipun Jain

Reputation: 1014

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

Upvotes: 0

equi
equi

Reputation: 894

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.

Upvotes: 1

Related Questions