Vue.JS data property not defined

Question

I have been trying to show my modal but for some reason it keeps saying that the property isn't defined even though I have declared it in the Data()

I feel like I am missing something critical to my understanding on how this all works ...

The property is defined as false on load and should turn to true on click of the button.

 <template>
  <div class="product-item">
    <h3>{{product.name}}</h3>
    <p>{{product.tagline}}</p>
    <img class="product-image" :src="product.image_url">
    <p>PH: {{product.ph}}</p>
    <button class="show-modal" @click="showModal = true">Show a tip</button>
    <modal v-if="showModal" @close="showModal = false"></modal>
  </div>
</template>

<script>
import Modal from "@/components/Modal.vue";
export default {
  components: {
    Modal
  },
  Data() {
    showModal: false
  },
  props: {
    product: {
      type: Object
    }
  },
  methods: {},
  computed: {},
  mounted() {}
};
</script>

Boussadjra Brahim · Accepted Answer · 2019-08-06 10:07:24Z

3

You data Object should be returned via a function like :

data(){
    return{
      showModal: false
        }
   }

data should be in lowercase .

answered Aug 6, 2019 at 10:07

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Comments

fahad tufail · Accepted Answer · 2019-08-06 11:00:34Z

A component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object:

data: function () { return { ... }, }

import Modal from "@/components/Modal.vue";
export default {
  components: {
    Modal
  },
  data: function () {
    return {
      showModal: false
    },
  }
  props: {
    product: {
      type: Object
    }
  },
  methods: {},
  computed: {},
  mounted() {}
};

<template>
  <div class="product-item">
    <h3>{{product.name}}</h3>
    <p>{{product.tagline}}</p>
    <img class="product-image" :src="product.image_url">
    <p>PH: {{product.ph}}</p>
    <button class="show-modal" @click="showModal = true">Show a tip</button>
    <modal v-if="showModal" @close="showModal = false"></modal>
  </div>
</template>

Collectives™ on Stack Overflow

Vue.JS data property not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related