"Property or method is not defined on the instance but referenced during render"
"Property or method is not defined on the instance but referenced during render"
我需要在 <v-carousel>
之外显示 item.title
但我收到此错误消息:
[Vue warn]: Property or method "item" 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.
我检查了 Whosebug 搜索的结果,但我真的很难理解它。如果有人可以通过这个例子向我解释,我将不胜感激。
这是我的代码:
<v-carousel>
<v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i">
</v-carousel-item>
</v-carousel>
<h1>TITLE: {{ item.title }}</h1>
<script>
export default {
data () {
return {
items: [
{
src: '/static/a.jpg',
title: 'A',
text: 'texta'
},
{
src: '/static/b.jpg',
title: 'B',
text: 'textb'
}
{
}
}
}
</script>
这是我需要归档的内容:
一旦图像更改为下一个 - 范围的 outside 文本也应该更改。我试图检查范围外的项目数组的值,但它没有用:
<h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>
如何在范围外访问当前轮播项的值?
您需要在 v-carousel
组件上添加 v-model
:
<v-carousel v-model="carousel">
<v-carousel-item
v-for="(item,i) in items"
v-bind:src="item.src"
:key="i"
></v-carousel-item>
</v-carousel>
//then set title like this:
<h1>TITLE: {{ items[carousel].title }}</h1>
并将carousel
变量添加到data
data () {
return {
carousel: 0, //like this
items: [
...
我需要在 <v-carousel>
之外显示 item.title
但我收到此错误消息:
[Vue warn]: Property or method "item" 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.
我检查了 Whosebug 搜索的结果,但我真的很难理解它。如果有人可以通过这个例子向我解释,我将不胜感激。 这是我的代码:
<v-carousel>
<v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i">
</v-carousel-item>
</v-carousel>
<h1>TITLE: {{ item.title }}</h1>
<script>
export default {
data () {
return {
items: [
{
src: '/static/a.jpg',
title: 'A',
text: 'texta'
},
{
src: '/static/b.jpg',
title: 'B',
text: 'textb'
}
{
}
}
}
</script>
这是我需要归档的内容:
一旦图像更改为下一个 - 范围的 outside 文本也应该更改。我试图检查范围外的项目数组的值,但它没有用:
<h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>
如何在范围外访问当前轮播项的值?
您需要在 v-carousel
组件上添加 v-model
:
<v-carousel v-model="carousel">
<v-carousel-item
v-for="(item,i) in items"
v-bind:src="item.src"
:key="i"
></v-carousel-item>
</v-carousel>
//then set title like this:
<h1>TITLE: {{ items[carousel].title }}</h1>
并将carousel
变量添加到data
data () {
return {
carousel: 0, //like this
items: [
...