CODEWITHSUNDEEP
javascriptvue.jsvue-component
Pathlessbark8
Pathlessbark8

Reputation: 73

Making an array instance dynamic in VUE.JS

(Please note, I have used v-calander plugin) I am new to vue.js and I am stuck here for a while now. I am recording the Click of a button and passing it down to this component by changing the value of Click from 0 to 1. But at the same time, I want the highlight attribute to change from red to green but I don't know how to make this reactive. The error that I get is for this line :

highlight: (Click === 0 ? "red" : "green"),

Parsing error: Unexpected token, expected ")"

I need some help making the highlight property become green when Click becomes 1. Here is the code:

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

Upvotes: 1

Views: 57

Answers (1)

Jake Lam
Jake Lam

Reputation: 3452

i think your syntax is wrong, it should be in computed

  computed:
  {
        attributes() {
         return             
         [
          {
            key: "today",
            highlight: (this.Click === 0 ? "red" : "green"),
            dates: new Date()
          }
         ]
        }
  },

and in your HTML, should be like this

<vc-calendar is-dark :attributes="attributes"/>

Upvotes: 1

Related Questions