Vue.js-渲染问题

我正在尝试创建一个组件，它可以在单击时显示/隐藏，类似于手风琴

我有以下错误，我不知道原因：

[Vue warn]：未在上定义属性或方法“已打开” 实例，但在渲染期间被引用。确保声明为被动 数据选项中的数据属性。（在根实例中找到）

Vue.组件（“m面板”{
数据：函数（）{
返回{
开放：真的吗
}
},
模板：“Lorem Ipsum
”
})
新Vue({
el:“#应用程序”，
})

您的代码似乎有点混乱，您的

处于打开状态

位于组件中，但您正试图在父级中访问它。您只需要确保这个逻辑包含在您的组件中。最简单的方法是简单地将事件放置在组件模板中的相关元素上：

<template>
  <div>
    <!-- Toggle when button is clicked-->
    <button @click="is_open=!is_open">
      Open Me!
    </button>
    <span v-show="is_open">
      I'm Open!
    </span>
  </div>
</template>

打开我！
我开门！

---

这里是JSFiddle:

您的代码似乎有点混乱，您的

在组件中是开放的，但是您试图在父级中访问它。您只需要确保这个逻辑包含在您的组件中。最简单的方法是简单地将事件放置在组件模板中的相关元素上：

<template>
  <div>
    <!-- Toggle when button is clicked-->
    <button @click="is_open=!is_open">
      Open Me!
    </button>
    <span v-show="is_open">
      I'm Open!
    </span>
  </div>
</template>


打开我！
我开门！

以下是JSFIDLE:
因为您在“#app instance”中使用了is#u open属性，但没有在其中声明，所以您在与它无关的“m-panel组件”中声明了它。尝试类似的方法可以避免它

new Vue({
    el:'#app',
    data:{
       is_open:''
    }
})

因为你在“#app instance”中使用的是_open属性，但你没有在其中声明，所以你在与它无关的“m-panel component”中声明了它。尝试类似的方法可以避免它

new Vue({
    el:'#app',
    data:{
       is_open:''
    }
})

这只是一个例子，还是您确实在
元素之外编写了
脚本，而脚本本身在
元素之外？除了该消息之外，console中是否有任何错误？这只是一个示例，还是您确实在
元素之外编写了
脚本，而脚本本身在
元素之外？除了那个消息，控制台中还有错误吗？