I encountered the following error:
33:7 error '$' is not defined
The code snippet below shows AddToCart.js contents. The modal formatting can be found in my Product List component.
<template>
<div class="add-to-cart">
<button class="btn btn-primary" @click="addToCart" style="background-color: black; color: whitesmoke; width: 80px; font-size: small">
Add To Cart
</button>
</div>
</template>
<script>
export default {
name: "Add-to-cart",
props: {
name: String,
price: Number,
ID: String,
},
data(){
return {
record: {
recordName: this.name,
recordPrice: this.price,
recordID: this.ID,
},
}
},
methods: {
addToCart() {
$('#myModal').modal('show')
this.$store.commit('addToCart', this.record);
},
}
};
</script>
<style scoped>
</style>
I attempted to import $ from bootstrap to resolve the issue, however, it caused a new error stating that $('#myModal').modal('show') is not a function. I am struggling to get the modal feature to work as intended.