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数据未定义

1 个答案: