(I would like to mention that I am utilizing the v-calendar plugin) I recently started working with vue.js and have been facing a challenge for some time now. I am trying to track button clicks and pass this information down to a component by toggling the value of Click from 0 to 1. However, I also want the highlight attribute to change from red to green based on this click event, but I am unsure how to achieve this reactivity. The specific error I encounter is related to this line:
highlight: (Click === 0 ? "red" : "green"),
Parsing error: Unexpected token, expected ")"
I require assistance in updating the highlight property to turn green when Click changes to 1. Below is the code snippet:
<template lang="html">
<div class="container-fluid wrap">
<vc-calendar is-dark :attributes="attributes(Click)"/>
{{ Click }}
<br />
<!-- {{ Change(Click) }} -->
<br>
</div>
</template>
<script>
export default {
name: "Calander",
props: {
Click: {
type: Number,
default: 0
}
},
data()
{
return{
attributes(Click):
[
{
key: "today",
highlight: (Click === 0 ? "red" : "green"),
dates: new Date()
}
]
}
},
// computed: {
// Change(Click) {
// return Click === 0 ? "red" : "green";
// }
// },
};
</script>
<style lang="css" scoped>
.wrap {
background-color: #ffe277;
text-align: center;
padding: 3rem 0rem 3rem 34rem;
}
</style>