属性或方法未在 v-bind:class 中的实例上定义，但在数据中

Posted 2023-02-23

【中文标题】属性或方法未在 v-bind:class 中的实例上定义，但在数据中

【英文标题】：Property or method is not defined on the instance in v-bind:class but is in data

【发布时间】：2018-03-19 06:56:40

【问题描述】：

我有我的组件：

<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();

所以我在数据中定义了变量，但它返回这些错误：

app.js:11624 [Vue 警告]：属性或方法“成功”未定义 在实例上，但在渲染期间引用。务必申报 data 选项中的响应式数据属性。

发现于

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

【问题讨论】：

如果将message 替换为success，您会看到什么？

没什么，我得到同样的错误

但是message 和showing 工作？？

您在下面评论了 Hashemi 的回答，指出“错误是（我是个白痴：/）我没有放置标签 </script>” -这是否意味着您的问题不再存在？

问题是我没有放标签脚本。没有标签脚本我用标签热错误它工作

【参考方案1】：

你可以这样查看：

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

【讨论】：

我复制了你的代码并运行它，但我没有发现任何错误

谢谢，是的，我明白了，因为实际上似乎一切都正确，但我不明白我错在哪里。但是，您的解决方案也没有解决问题

我粘贴了我的代码，错误是（我是个白痴：/）我没有放标签

【参考方案2】：

问题是我没有把标签 放在结束文件上

【讨论】：

这是什么意思？

文件末尾缺少标签，我在答案中写了但它没有显示，因为它被解释为代码