组件数据函数返回的Vue 2数据未定义答案

【问题标题】：Vue 2 data returned by component data function are not defined组件数据函数返回的Vue 2数据未定义
【发布时间】：2017-02-12 09:30:11
【问题描述】：

我正在开发一个应用程序，我使用Vue 2 作为我的javascript 框架，我尝试声明一些components 并在我的html 页面中使用它们这是我的html：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet"  
     href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css"  />   
</head>
<body>

<div id="modal_element" >

<modal v-if="showModal" ></modal>

<button @click="showModal = true" >Show Modal</button>

</div>

<div id="root">
  <ul>
   <li v-for="task in incompeletedTasks" >
      {{ task.description }}
   </li>
  </ul>
</div>
</body>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js" ></script>
<script src="main.js"></script>    
<script src="modal.js" ></script>
<script>
   let main_data = {
     tasks : [
        { description : "Go to the store ", completed : true },
        { description : "Leave the store" , completed : false }
       ]        
    }
   new Vue({
     el : "#root",
     data : main_data,
     computed : {       
       incompeletedTasks() {
        return this.tasks.filter(task => !task.completed);
       }
   }
 });

这是modal.js 文件：

Vue.component('modal',{
  template : '<div id="modal_element">
          <div class="modal is-active">
          <div class="modal-background"></div>
          <div class="modal-content box">
            <p>
              Some Modal Text here ...
            </p>
           </div>
          <button class="modal-close" @click="showModal = false" >
          </button>
       </div>',

   data : function(){
     return {
       showModal : false
     };
   }
  });

 new Vue({
  el : '#modal_element',
 });

但是没有显示模态框，我在chrome console中收到以下错误

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

问题：我必须进行哪些修改才能使代码正常工作？并且html页面成功显示modal?

【问题讨论】：

请把 jsfiddle 和你的代码放在一起，我会处理它
另外，组件中的主 div 不应该有 modal_element 的 id。它会让 VueJS 感到困惑。
这部分是什么： let main_data = { //一些数据 } new Vue({ //Vue code here }); ?
@MU 感谢 cmets 当你说 modal_element 不应该设置为元素的名称时我不明白，这让 VueJS 感到困惑，为什么 Vue 会感到困惑通过这个？
@MU 我还提供了详细的完整代码，请再次检查，提前谢谢

标签： javascript vuejs2 vue-component

【解决方案1】：

我认为有几件事。

在此示例中，您将创建 2 个 vue 实例（#root 和 #modal-element），因此除非您有一些商店，否则数据将无法共享。最好只有一个实例并将组件放入其中。
您需要将组件传递到 vue 实例中，以便它了解该组件。

这是一个删减了很多内容的示例。

https://jsfiddle.net/Austio/vhgztp59/2/

它的要点是

var component = ...createComponentStuff

new Vue({
  ...otherVueStuff,
  components: [component]
})

【讨论】：