Javascript 在VUE.JS中动态创建阵列实例

（请注意，我使用了v-calander插件） 我是vue.js的新手，我在这里呆了一段时间。 我正在记录按钮的点击，并通过将点击值从0更改为1将其传递给此组件。但同时，我希望highlight属性从红色变为绿色，但我不知道如何使其反应。我得到的错误是针对此行的：

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

Parsing error: Unexpected token, expected ")"

当单击变为1时，我需要一些帮助使高亮显示属性变为绿色。 代码如下：

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

{{点击}




导出默认值{
名称：“Calander”，
道具：{
点击：{
类型：数字，
默认值：0
}
},
数据（）
{
返回{
属性（单击）：
[
{
关键：“今天”，
突出显示：（单击===0？“红色”：“绿色”），
日期：新日期（）
}
]
}
},
//计算：{
//更改（单击）{
//返回点击===0？“红色”：“绿色”；
//   }
// },
};
.包裹{
背景色：#ffe277；
文本对齐：居中；
填充：3rem 0rem 3rem 34rem；
}

我认为你的语法是错误的，它应该在计算机中

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

在HTML中，应该是这样的

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

我也试过了，但没有反应。它使用红色，然后在单击按钮时不会变为绿色。您可以显示单击功能的代码，您可以在其中放置逻辑以更新突出显示，它可能不会以反应方式编码。我不介意共享，但我必须添加该代码，然后再添加我的App.vue文件。但是，当我打印{{Click}}时，它会在单击按钮后从0变为1。我更新我的代码，您是否可以重试，从数据中删除它，然后尝试移动到计算，并删除html中的Click参数