Direct operation of props, is not recommended in vue. What should I do?

<template>
  <div class="ticket-content">
    <div class="ticket-content-left">
      <h1>{{title}}</h1>
      <h3>{{limit}}</h3>
      <h3 style="color: -sharp999;">{{condition}}</h3>
    </div>
    <div class="ticket-content-right" :class="{available : available}" @click="getTicket">
      <span>{{available ? "":""}}</span>
      <div class="ticket-content-right-border" :class="{borderAvailable : available}"></div>
    </div>
  </div>
</template>

<script>
    export default {
      props:{
        title:String,
        limit:String,
        condition:String,
        available:Boolean
      },
      data(){
        return {

        }
      },
      methods: {
        getTicket(){
          this.available = false;
        }
      }

    }
</script>

what should I do if I want to manipulate the value of available?

Mar.14,2021
The value of props is assigned to data in

mounted. If you want to change the value of the parent component props, use emit
or directly use vuex, to solve everything

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1beea0b-31c21.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1beea0b-31c21.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?