Vue.js

Question

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

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

[Vue warn]: Property or method "is_open" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

<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 属性但你没有在其中声明，你在'm-panel component'中声明了与it.Try无关的东西这样可以避免。

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

Vue.js - 渲染问题

Vue.js - Render issue

vue-component