Question

我查看了一个答案并尝试应用它，但是后来我意识到它没有用，我尝试了很多类似使用Vuex的方法来计算使用它的年限，但是没有任何效果。

Generate Years from 1900 to current year with VueJS

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

就像我说的那样，我尝试使用Vuex并尝试在beforeCreate挂钩上调用它，但是它没有用。

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

我期望下拉列表具有Years值，而不是null并给出错误消息。我也尝试过重命名这些值，但这并不需要做任何事情。这是一个非常奇怪的错误。我很想知道这是否是由vue.js本身引起的。

Answer 1

您的数据属性应返回值：

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

并且您的v-for前面不应：：

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

修复这些问题，它应该可以工作。

Answer 2

您的代码中有两个问题：

您没有正确使用数据属性。您应该像这样在数据内部返回值：

data () {
  return {
    year: null
  }
}

您在v之前使用:，这是错误的，我认为这就是您面临问题的原因。只需删除:

希望有帮助！

属性或方法“值”未在实例上定义，但在渲染期间被引用

2 个答案: