Vue.js -呈现问题

Question

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

我有以下错误，我不知道为什么：

Vue警告:属性或方法"is_open“不是在实例上定义的，而是在呈现期间引用的。确保在data选项中声明反应性数据属性。(在根实例中找到)

<div id="app">
    <div is="m-panel" v-show="is_open"></div>
    <div is="m-panel" v-show="is_open"></div>
</div>

</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="comp_a.js" ></script>
<!--<script src="app.js" ></script>-->
</html>

Vue.component('m-panel', {
  data: function() {
      return {
          is_open: true
      }
  },
    template: '<p>Lorem Ipsum</p>'
})

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

Answer 1

您的代码似乎有点混乱，您的is_open在您的组件中，但是您试图在父组件中访问它。您只需要确保这个逻辑包含在组件中。最简单的方法是在组件模板中的相关元素上放置一个事件：

<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：https://jsfiddle.net/ytw22k3w/

Answer 2

因为你在'#app实例‘中使用了is_open属性，但是没有在它中声明，所以在与it.Try没有关系的’m面板组件‘中删除，这样可以避免它。

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