Vue 2 data returned by component data function are not defined

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:

<!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/[email protected]/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:

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

   [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?

please put jsfiddle together with your code and I will work on it — Marek Urbanowicz
– Marek Urbanowicz, Commented Feb 12, 2017 at 9:34
also, the main div in component should not have the id of modal_element. it can make VueJS confused. — Marek Urbanowicz
– Marek Urbanowicz, Commented Feb 12, 2017 at 9:36
what is this part: let main_data = { //some data } new Vue({ //Vue code here }); ? — Marek Urbanowicz
– Marek Urbanowicz, Commented Feb 12, 2017 at 9:38
@MU thanks for comments I didn't understand when you said modal_element shouldn't have set as the name of the element and it make VueJS confused, why Vue will be confused by this? — Siavosh
– Siavosh, Commented Feb 12, 2017 at 10:08
@MU I also provided the full codes in details please check it again thanks in advance — Siavosh
– Siavosh, Commented Feb 12, 2017 at 11:05

Austio · Accepted Answer · 2017-02-12 14:25:35Z

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. 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.

Here is an example with alot of the stuff trimmed out.

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

The gist of it is

var component = ...createComponentStuff

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

edited Feb 12, 2017 at 14:25

answered Feb 12, 2017 at 12:37

Austio

6,0951 gold badge23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 2 data returned by component data function are not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related