Как избавиться от реактивности?

Question

[Artem0071]

Есть у меня компонент с билетами, я хочу избавиться от рекативности. Поясню.
Есть таблица:

<tr v-for="(oneTicket, index) in allTickets">
                      <td>{{index + 1}}</td>
                      <td>{{oneTicket.title}}</td>
                      <td>{{oneTicket.price}}</td>
                      <td>{{oneTicket.quantity}}</td>
                      <td>{{oneTicket.description}}</td>
                    </tr>

В data() прописал данные:

ticket:{
            title: null,
            price: 0,
            quantity: 0,
            description: null
          },
          allTickets: []

И метод добавления:

methods: {
        addTicket(){
            let ticket = this.ticket; //пытался избавиться от реактивности
            this.allTickets.push(ticket);
        },

И собственно 4 поля для заполнения данных

<input v-model="ticket.title">
<input v-model="ticket.price">
<input v-model="ticket.quantity">
<textarea v-model="ticket.description">
<button @click="addTicket"

Когда заполняю новое, меняется вся таблица. Как сделать так, чтобы данные не перезаписывались в таблице, когда что то новое записываю?

Answer 1

[Evgeny Kulakov]

Вот так нужно избавляться:
let ticket = {...this.ticket};
Т.е. создавать новый объект вместо присваивания ссылки на объект.