Property or method is not defined on the instance in v-bind:class but is in data

Question

I have my component:

<template>
   <div class="snack-visible" :class="{'snack-danger':!success,  'snack-success':success  }">
      <div>
         <strong>{{message}}</strong>
      </div>
    </div>
</template>
<script>

export default {
   data(){
        return{

            showing: false,
            message:"",
            success:false
        }
    }
//here other methods and created();
}

So i have defined variables in data, but it return these errors:

app.js:11624 [Vue warn]: Property or method "success" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> at /var/www/html/carrozzeria/resources/assets/js/components/Snackbar.vue

What do you see if you replace {{message}} with {{success}}? — kevguy
You commented on the answer by Hashemi below, stating "the error was (I'm a idiot :/ ) that I didn't put tag </script>" - does that mean your problem no longer exists? — Sᴀᴍ Onᴇᴌᴀ
The problem was that I dind't put tag script. Without tag script i hot errore with tag It work — LorenzoBerti

Hashemi Rafsan Hashemi Rafsan · Accepted Answer · 2017-10-07T17:59:50

you can check it out by like this :

<template>
 <div class="snack-visible" :class="success ? 'snack-success' : 'snack-danger'">
  <div>
     <strong>{{message}}</strong>
  </div>
</div>
</template>

<script>

export default {
  data(){
    return{

        showing: false,
        message:"",
        success:false
    }
 }
//here other methods and created();
}
</script>

Property or method is not defined on the instance in v-bind:class but is in data

2 Answers