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

Question

I am developing an application and I am using Vue 2 as my javascript framework, I tried to declare some components and use them in my html pages this is my html:我正在开发一个应用程序，我使用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);
       }
   }
 });

and this the modal.js file:这是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',
 });

but the modal is not displayed, and I am getting the following error in the chrome console但没有显示模态，我在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.

Question : what modification do I have to make to get the code working?问题：我必须进行哪些修改才能使代码正常工作？ and html page successfully displays modal ?并且 html 页面成功显示modal ？

Answer 1

I think there are a couple of things.我认为有几件事。

You are creating 2 vue instances in this example (#root and #modal-element), so the data will not be able to be shared unless you have some store.你在这个例子中创建了 2 个 vue 实例（#root 和 #modal-element），所以除非你有一些存储，否则数据将无法共享。 Much better to have just a single instance and put components in that.最好只有一个实例并将组件放入其中。
You will need to pass the component into the vue instance in order for it to be aware of the component.您需要将组件传递给 vue 实例，以便它知道该组件。

Here is an example with alot of the stuff trimmed out.这是一个示例，其中删除了很多内容。

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

The gist of it is它的要点是

var component = ...createComponentStuff

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-02-12 12:37:42

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-02-12 12:37:42

解决方案1
1 已采纳 2017-02-12 12:37:42