Vue.js - 渲染问题答案

【问题标题】：Vue.js - Render issueVue.js - 渲染问题
【发布时间】：2016-12-13 13:19:20
【问题描述】：

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

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

[Vue 警告]：属性或方法“is_open”未在实例，但在渲染期间引用。确保声明反应式数据选项中的数据属性。（在根实例中找到）

<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',
})

【问题讨论】：

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

标签： vue.js vue-component

【解决方案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/

【讨论】：

【解决方案2】：

因为你在'#app instance'中使用了is_open属性但你没有在其中声明，你在'm-panel组件'中声明了与它没有关系。尝试这样的事情可以避免它。

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

【讨论】：