Making an array instance dynamic in VUE.JS

Question

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

Jake Lam · Accepted Answer · 2020-05-21 05:44:36Z

1

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

edited May 21, 2020 at 5:44

answered May 21, 2020 at 5:29

Jake Lam

3,4723 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pathlessbark8 Over a year ago

I tried that too, but it doesn't become reactive. It uses red then never changes to green upon clicking the button

Jake Lam Over a year ago

can you show the code of your clicking function, where you put the logic to update the highlight, it may not code in reactive way

Pathlessbark8 Over a year ago

I don't mind sharing but I would have to add that then my App.vue file also. However, When I print {{Click}}, it changes from 0 to 1 upon clicking the button.

Jake Lam Over a year ago

i update my code, can you try again, remove it from data and try move to computed , and remove the Click parameter in your html

Collectives™ on Stack Overflow

Making an array instance dynamic in VUE.JS

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related