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

Posted 2023-02-22

【中文标题】“属性或方法未在实例上定义，但在渲染期间引用”

【英文标题】："Property or method is not defined on the instance but referenced during render"

【发布时间】：2018-06-22 23:56:36

【问题描述】：

我需要在<v-carousel> 之外显示item.title，但我收到以下错误消息：

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

我检查了 *** 搜索的结果，但我真的很难理解它。如果有人能通过这个例子向我解释，我将不胜感激。 这是我的代码：

<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> 如何在范围外访问当前轮播项的值？

【问题讨论】：

在您的示例中，item 在v-carousel-item 范围内，因此您不能在外部使用它。现在这一切都取决于您真正想要实现的目标。 （哪个标题需要在h1 内，或者每个v-carousel-item 都应该有自己的标题）

@Traxo 感谢您的解释。这就是我需要存档的内容：一旦图像更改为下一个图像 - <v-carousel> 范围之外的标题文本也应该更改。我试图检查范围之外的项目数组的值，但它不起作用：<h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1>

如果您有时间，请更新您的问题，以便更清楚您想要实现的目标，而不是仅仅停留在 cmets 中。

【参考方案1】：

你需要在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: [
       ...