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

Question

我正在开发一个应用程序，我正在使用 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?

Answer 1

我认为有几点。

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

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

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

它的要点是

var component = ...createComponentStuff

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

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

Vue 2 data returned by component data function are not defined

javascript

vue-component

vuejs2