Question

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

[Vue警告]：财产或方法＆＃34;项目＆＃34;未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

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

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

这是我需要存档的内容：

只要图片更改为下一张图片，范围内的文字也应该更改。我试图检查范围之外的项目数组的值，但它没有工作： <h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1> 如何访问范围之外的当前轮播项的值？

Answer 1

您需要在v-model组件上添加v-carousel：

<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: [
       ...

Answer 2

我认为您应该将<h1>放在<v-carousel-item>内而不是外面！

就像这样：

<v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i">
    <h1>TITLE: {{ item.title }}</h1>
</v-carousel-item>

这应该有效！

＆＃34;属性或方法未在实例上定义，但在渲染期间引用＆＃34;

2 个答案: