属性或方法 "value" 不在实例上定义，但在呈现过程中引用

Question

我查看了其中一个答案并尝试应用它，但后来我意识到它不起作用，我尝试了很多方法，比如使用Vuex计算我使用它之前的年份，但都不起作用。

使用VueJS 生成从1900年到当前年份的年份

属性或方法"；值"；未在实例上定义，但在渲染过程中被引用。通过初始化该属性，确保该属性在数据选项中是被动的，或者对于基于类的组件是被动的。请参阅：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-反应特性。

正如我所说，我尝试使用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>

我希望下拉列表具有年份值，而不是为空并给出错误消息。我还试图重命名这些值，但这与此无关。这是一个非常奇怪的bug。我很想知道这是不是vue.js本身造成的。

Answer 1

上一个错误背后的原因是您很可能忘记在Vue应用程序的数据对象中定义道具XXX：

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

Answer 2

您的数据属性应该返回值：

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

而且你的v-for前面不应该有:：

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

修复这些，它应该会起作用。

Answer 3

您的代码中有两个错误。

第一个是：

<md-option v-for="(val,index) in values" :key="index" :value="val">
{{ value }}
</md-option>

1. 您需要使value属性为反应属性，以考虑来自v-for循环的动态值
2. 使用v-for时始终使用:key属性
3. 不应该有:作为v-for的前缀
4. 为了更好地理解代码，尽量使变量名与属性不同

第二个是：

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

data()对象中缺少return。

Answer 4

您的代码中有两个问题：

1. 您没有正确使用数据属性。您应该在数据中返回值，如下所示：

data () {
return {
year: null
}
}

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

希望它能有所帮助！！