title: Check Whether the purchase ID exist in v-data table
body: <p>I need to check the purchase ID whether exist from the v-data table, if not exists then will display alert message. But I have got the errors.
  So i apply the checking method which is <strong>tick()</strong> into v-btn, once the user clicked the button, it will check the existence of purchase ID, if the ID exist then add to "selected" column, if not exist then unable to add.</p>
  
  <pre><code>&lt;template lang="html"&gt;
  &lt;div class=""&gt;
  &lt;input
  hidden
  type="file"
  accept=".jpg,.jpeg,.png,.pdf"
  ref="selectPic"
  @change="addReceipt"
  &gt;
  &lt;v-btn @click="selectPic()" color="info"&gt;Select Image&lt;/v-btn&gt;&lt;br&gt;
  &lt;img :src="preview" alt=""&gt;&lt;br&gt;
  &lt;input type="text" name="test" v-model="text" placeholder="type here" /&gt;&lt;v-btn @click="tick()"small color="rgba(10,0,0,0)"&gt;click&lt;/v-btn&gt;&lt;br&gt;
  &lt;v-btn @click="submit()" v-if="preview" :disabled="selected.length==0" x-small color="rgba()"&gt;Confirm&lt;/v-btn&gt;&lt;br&gt;
  &lt;p&gt;Total : {{sum}}&lt;/p&gt;
  &lt;p&gt;Purchase Ids: {{selected}}&lt;/p&gt;
  &lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;Purchase ID&lt;/th&gt;
    &lt;th&gt;Merchant&lt;/th&gt;
    &lt;th&gt;Review Date&lt;/th&gt;
    &lt;th&gt;Order ID&lt;/th&gt;
    &lt;th&gt;Payment Method&lt;/th&gt;
    &lt;th&gt;Order Total&lt;/th&gt;
    &lt;th&gt;Purchase Amount&lt;/th&gt;
    &lt;th&gt;Amount Pay&lt;/th&gt;
    &lt;th&gt;Tick&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr v-for="(p,i) in purchases"&gt;
    &lt;td @click="selectList(p.purchase_id,p.amountDue)"&gt;{{p.purchase_id}} &lt;span v-if="p.old_purchase_id"&gt;&amp;nbsp;({{p.old_purchase_id}})&lt;/span&gt;&lt;/td&gt;
    &lt;td @click="selectList(p.purchase_id,p.amountDue)"&gt;{{p.shop_name}}&lt;/td&gt;
    &lt;td @click="selectList(p.purchase_id,p.amountDue)"&gt;{{p.reviewedDate.split(" ")[0]}}&lt;/td&gt;
    &lt;td @click="selectList(p.purchase_id,p.amountDue)"&gt;{{p.order_id}}&lt;/td&gt;
    &lt;td @click="selectList(p.purchase_id,p.amountDue)"&gt;
      &lt;div v-if="p.payment_method!='redemption'"&gt;
        {{p.redemptions}} &lt;br&gt;
        {{p.payment_method}}: {{p.orderCurrency}} {{p.payment}}
      &lt;/div&gt;
      &lt;div v-if="p.payment_method=='redemption'"&gt;
        {{p.redemptions}}
      &lt;/div&gt;
    &lt;/td&gt;
    &lt;td @click="selectList(p.purchase_id,p.amountDue)"&gt;{{p.orderCurrency}} {{p.amount}}&lt;/td&gt;
    &lt;td @click="selectList(p.purchase_id,p.amountDue)"&gt;{{p.currency_code}} {{p.total}}&lt;/td&gt;
    &lt;td @click="selectList(p.purchase_id,p.amountDue)"&gt;{{p.currency_code}} {{p.amountDue}}&lt;/td&gt;
    &lt;td&gt;&lt;input type="checkbox" :value="p.purchase_id" v-model="selected" :ref="'selectList'+p.purchase_id" @change="handleSum($event.target.checked,p.amountDue)"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Script code: </p>
  
  <pre><code>&lt;script&gt;
  export default {
  data(){
  return{
    preview: null,
    purchases: [],
    selected: [],
    text:'',
    sum: 0,
    count: 0,
    exists: null
   }
  },
  created(){
    this.getPurchases()
  },
  methods:{
    submit(){
    axios.post("/api/admin/order/uploadPaySlip",{
      selected: this.selected,
      image: this.preview
    }).then(response =&gt; {
      location.reload()
    })
   },
   getPurchases(){
    this.$store.state.loading = true
    axios.get("/api/admin/order/getPurchases?status=2"
    ).then(response =&gt; {
      this.purchases = response.data.labels
      this.$store.state.loading = false
    })
  },
  selectPic(){
    var btn = this.$refs.selectPic
    btn.click()
  },
  selectList(p,sum){
    let cb = this.$refs['selectList'+p]
    cb[0].click()
    this.handleSum(cb[0].checked,sum);
  },
  addReceipt(e){
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length)
        return;
  
    let file = files[0];
  
    let reader = new FileReader();
    let vm = this;
    reader.onload = (e) =&gt; {
        vm.preview = e.target.result;
    };
    reader.readAsDataURL(file);
  },
  tick(){
      var array = this.text.split(" ");
      array.forEach((item, index)=&gt;{
        if(array.indexOf(this.purchase_id) !== -1){
          this.selected.push(parseInt(item))
          console.log('true');
        }else{
          alert(this.$translate('ID_not_exist'))
        }
  
      })
  
      this.text = '';
  },
  handleSum(state,sum){
      // Add or deduct total sum of payment slips
      if(!state) this.sum -= parseFloat(sum)
      else this.sum += parseFloat(sum)
  
      // Handle floating numbers
      if(this.selected.length == 0) this.sum = 0;
   }
   }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>What problem I faced is the tick() method, whether I enter the purchase ID that is exist, it keep show me error message and unable to add to the input text.</p>
  
  <p>Anyone have idea to solve this problem? Thanks</p>