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

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

javascript vuejs2

Javascript 未定义组件数据函数返回的Vue 2数据,javascript,vuejs2,vue-component,Javascript,Vuejs2,Vue Component,我正在开发一个应用程序，我正在使用Vue 2作为我的javascript框架，我试图声明一些组件，并在html页面中使用它们这是我的html： <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bul

我正在开发一个应用程序，我正在使用

Vue 2

作为我的javascript框架，我试图声明一些

组件

，并在

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);
       }
   }
 });

但是模式没有显示，我在

chrome控制台中得到以下错误
   [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页面成功地显示了模式
？
我认为有几点
在本例中，您正在创建2个vue实例（#root和#modal元素），因此除非您有一些存储，否则数据将无法共享。最好只有一个实例并将组件放在其中
您需要将该组件传递到vue实例中，以便它了解该组件
下面是一个例子，其中删去了很多内容

要点是
var component = ...createComponentStuff

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

请将JSFIDLE与您的代码放在一起，我将处理italso，组件中的主div不应具有modal_元素的id。这会让VUEJ感到困惑。这是什么部分：让main_data={//some data}新建Vue（{//Vue code here}）@MU感谢您的评论，我不明白您说的modal_元素
不应该设置为元素的名称，这会使VueJS
感到困惑，为什么Vue会因此而困惑？@MU我还提供了详细的完整代码，请提前再次检查，谢谢
var component = ...createComponentStuff

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