Vue.JS 数据属性未定义答案

【问题标题】：Vue.JS data property not definedVue.JS 数据属性未定义
【发布时间】：2019-12-13 20:42:58
【问题描述】：

我一直在尝试显示我的模式，但由于某种原因，它一直说该属性未定义，即使我已在 Data() 中声明它

我觉得我错过了一些对我理解这一切如何运作至关重要的东西......

该属性在加载时定义为false，单击按钮时应变为true。

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您的数据对象应该通过如下函数返回：

data(){
    return{
      showModal: false
        }
   }

data 应为小写。

【讨论】：

【解决方案2】：

组件的数据选项必须是function，这样每个实例都可以维护一个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>

【讨论】：