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

Question

Here, I am working on theme color to change the background color whereby I am tried to display in the pop up form but the problem is that I can see my dialog box empty without showing the theme colors. I am using vuetify theme colors to apply or change the background color of app and nav bar of my project.

My code is here:

<template>
<nav>


        <v-app-bar color="theme"
                   height="45px"
                   clipped
                   dark app>
            <v-app-bar-nav-icon @click.stop="drawer = ! drawer">

            </v-app-bar-nav-icon>

            <v-spacer> </v-spacer>

            <v-btn text icon>
                <v-icon style="">mdi-star</v-icon>
            </v-btn>
            <v-menu offset-y origin="center center" class="elevation-1" :nudge-bottom="14" transition="scale-transition" max-width="10">
                <v-btn icon text slot="activator">
                    <v-badge color="red" overlap>
                        <span slot="badge">3</span>
                        <v-icon medium>mdi-bell</v-icon>
                    </v-badge>
                </v-btn>
                <notification-list></notification-list>
            </v-menu>

                <v-menu
                        bottom
                        offset-y
                        :nudge-bottom="10"
                >
                    <template  v-slot:activator="{ on }">

                        <v-btn
                                dark
                                icon
                                v-on="on"
                        >

                            <span><v-icon>mdi-account-circle-outline</v-icon></span>

                        </v-btn>

                    </template>

                <v-list   flat>

                    <v-list-item active-class="border">
                        <v-list-item-icon style="padding-left: 10px; padding-right: 10px" >
                            <v-icon>mdi-account-circle-outline</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>Profile</v-list-item-title>
                    </v-list-item>

                    <v-list-item class="ml-1" active-class="border">
                        <v-list-item-icon>
                            <v-icon >mdi-logout-variant</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>logout</v-list-item-title>
                    </v-list-item>



                      <v-list-item  @click.stop="dialog = true">
                     <v-list-item-icon >  
                         <v-icon>mdi-select-color</v-icon>
                         </v-list-item-icon>
                            <v-list-item-title>Theme</v-list-item-title>

                            <v-dialog
      v-model="dialog"
      max-width="290"
    >

        <v-card>
        <v-card-title>Theme</v-card-title>
        <v-card-text>
          <v-btn text
              v-for="item in colors"
              :key="item"
              :color="item"
              @click="theme = item"
              class="ma-2"
            >
             </v-btn>
                     <template v-if="theme != item" v-slot:default>

              <span class="text-truncate" style="width:120px;">
        {{item.replace(/-/g, '')}}
      </span>
       </template>



              </v-card-text>
   <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
          <v-btn color="blue darken-1" text @click="dialog = false">Save</v-btn>
        </v-card-actions>




      </v-card>
    </v-dialog>

                    </v-list-item>








                </v-list>
            </v-menu>
        </v-app-bar>


        <v-navigation-drawer @click="!drawer"
                             dark
                             app
                             stateless
                             border
                             color="theme"
                             value="true"
                             :mini-variant="drawer">
            <v-layout  column align-center>
                <v-flex class="ma-2">
                    <v-avatar>
                         <v-img width="80" :src="require('../../../images/chillibiz.png')"> </v-img>
                    </v-avatar>
                    <p v-if="!drawer" class="white--text subheading mt-1 text-center" style="font-size:0.9em">ChilliBiz</p>
                </v-flex>
            </v-layout>
            <v-divider class=" mt-0 mb-0" />
            <v-list nav
                    dense
                    class="py-0" >
                <v-list-item v-for="item in menus" :key="item.name" :to="item.url" >
                    <v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title v-if="item.url=='/'">{{ item.name }}</v-list-item-title>
                        <v-list-item-title  v-if="item.url=='/hr'">{{ item.name }}<hrm/></v-list-item-title>
                        <v-list-item-title  v-if="item.url=='/inventory'">{{ item.name }}<master/></v-list-item-title>
                        <v-list-item-title  v-if="item.url=='/finace&accounts'">{{ item.name }}<finance/></v-list-item-title>
                        <v-list-item-title  v-if="item.url=='/reports'">{{ item.name }}</v-list-item-title>
                        <v-list-item-title  v-if="item.url=='/system'">{{ item.name }}</v-list-item-title>  
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
    </nav>


</template>
<script>
    import hrm from "./HRcomponent"
    import master from "./MasterComponent"
    import finance from "./FinanceComponent"

    export default {
        data() {
            return {
                 drawer:false,
                   dialog: false,
                 searchOpen: false,
                menus: [
                    {icon:'',name:'', url:''}
                ],
                theme: '',
                colors: ["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","blue-grey","grey", "black"],
            }
        },
        methods: {

        },
        created() {
            axios
                .get('api/menuslevel0')
                .then(response => (this.menus = response.data))
        },     
        components :{
            hrm,
            master,
            finance
        }
    }
</script>

Answer 1

In this piece of code a scope of item ends at that's why item is not defined in template and span tags.

<v-btn text
              v-for="item in colors"
              :key="item"
              :color="item"
              @click="theme = item"
              class="ma-2"
            >
             </v-btn>
                     <template v-if="theme != item" v-slot:default>

              <span class="text-truncate" style="width:120px;">
        {{item.replace(/-/g, '')}}
      </span>
       </template>