Javascript 未定义Vue.JS数据属性

我一直试图显示我的模态，但出于某种原因，它一直说属性没有定义，即使我在

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>

{{product.name}
{{product.tagline}

PH:{{product.PH}}

给小费
从“@/components/Modal.vue”导入模态；
导出默认值{
组成部分：{
情态动词
},
数据（）{
showModal:错误
},
道具：{
产品：{
类型：对象
}
},
方法：{}，
计算：{}，
挂载（）{}
};

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

data(){
    return{
      showModal: false
        }
   }

---

数据

应为小写。

组件的数据选项必须是

函数

，以便每个实例都可以维护返回数据对象的

独立副本

：

数据：函数（）{
返回{
...
},
}

从“@/components/Modal.vue”导入模态；
导出默认值{
组成部分：{
情态动词
},
数据：函数（）{
返回{
showModal:错误
},
}
道具：{
产品：{
类型：对象
}
},
方法：{}，
计算：{}，
挂载（）{}
};

{{product.name}
{{product.tagline}

PH:{{product.PH}}

给小费