vue.jsで配列に一意の値しか入れられないバリデーションを実装したい

Question

a［］という配列に同じ値を入れるとエラーが表示されたり入れられないようにする方法はありますか？

以下の記事を参考にしましたがtrue、falseが返ってくるだけでバリデーションになっていないです。
https://pisuke-code.com/js-check-duplicated-array-values/

vueのtemplate内に書ける記述があればいいのですが調べても出て来ずに悩んでいます。
どなたかヒントお願いします。

【以下追記】
aという配列にshop.idを追加していく。
shop.idが重複した場合はエラーを表示するか上書きしたい

<template>
  <v-btn @click="pushTest(), existsSameValue()"></v-btn>
</template>

<script>
  data: () => ({
    a:[]
  }),
  
  methods: {
    pushTest(){
      this.a = shop.id 
    },
    function existsSameValue(shop.id){
    var s = new Set(shop.id);
    return s.size != shop.id.length;
    }
  }
<script>

Comments

[plasticgrammer]

バリデーションをどのように実装しているのかもわからないので、何をどこまで説明したらよいのかが判断できません。
また、自身で作成しているコードを提示して頂けると助かります。

[shirout]

ご指摘ありがとうございます。
現在のコードになりますがこの時点で間違っている気がしていて、、、

Answer 1

動作確認はしていないのであくまでイメージですが、以下のようなコードになるかと思います。

<template>
  <v-text-field v-model="shopId"></v-text-field>
  <v-btn @click="pushTest()"></v-btn>
</template>

<script>
export default {
  data: () => ({
    shopId:'',
    a:[]
  }),
  methods: {
    pushTest() {
      // 入力値が配列にない場合のみ追加
      if (this.a.indexOf(this.shopId) < 0) {
        this.a.push(this.shopId);
      }
    }
  }
}
<script>