Vue warn: Property or method “item” is not defined on the instance but referenced during render

Question

im getting below error while i'm iterate CartItem.

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

why this error is showing and how can i solve this. [Note : this is a nativescript vue project]

<ListView      
      v-for="(item, index) in cartItems"  
      :key="index"                
      height="1000"
      class="listCard"
    >
      <v-template>
        <GridLayout
          rows="auto"
          columns="auto,*3,auto"
          backgroundColor="white"
          class="innerList"
        >
          <StackLayout orientation="horizontal" col="0" row="0">                
            <Button>
              <FormattedString>
                <Label
                  class="fa fas"
                  :text="'fa-trash' | fonticon"
                  fontSize="30"                                            
                ></Label>
              </FormattedString>
            </Button>
            <Image :src="item.imageUrl" height="80" width="auto"></Image>
          </StackLayout>

          <StackLayout col="1" row="0">
            <Label
              :text="item.title"
              textWrap="true"
              class="font-weight-bold"
              color="#333333"
            ></Label>
            <Label :text="item.color" color="#999999"></Label>
            <Label :text="'USD ' + item.price" color="red"></Label>
          </StackLayout>

          <StackLayout orientation="horizontal" col="2" row="0">
            <Button
              text="-"
              @tap="onDecriment(index)"
              class="operatorButton operatorBox"
              marginRight="0"
            />
            <Label 
              class="operatorLabel operatorBox" 
              :text="item.quantity">
            </Label>
            <Button
              text="+"
              @tap="onIncrement(index)"
              class="operatorButton operatorBox"
              marginLeft="0"
            />
          </StackLayout>
        </GridLayout>
      </v-template>
    </ListView>

Naren Naren · Accepted Answer · 2020-10-28T10:18:04

I don't see any error in your code but can you try using for instead of v-for. I see in this example, Listview is being using with for.

As per docs: If a v-for is used on a <ListView> a warning will be printed to the console, and it will be converted to the **for** property. you can read more about Listview with for here

<ListView      
      for="(item, index) in cartItems"  
      :key="index"                
      height="1000"
      class="listCard"
    >
....

Vue warn: Property or method “item” is not defined on the instance but referenced during render

1 Answers