Merhabalar kolay gelsin vue.js ye yeni başladım fakat her şey güzel bir yerde takıldım ve bir çözüm bulamadım
Şimdi boşta domainleri sorguladığım bir sayfam var ve eğer domain boştaysa sepete ekleye bastıklarında sepete ekletiyorum ama burada şöyle bir sorunum var sepete ekle için bir animasyon ekledim fakat fakat bu eklediğim animasyonun sadece belirlediğim alanda çalışmasını istiyorum fakat o hepsinde dönüyor buna nasıl bir çözüm bulabilirim acaba ?

Kodum :

<template>
    <app-layout>
        <div class="container sm:pt-5">
            <form @submit.prevent="domainSearch">
                <div class="card">
                    <div class="bg-success text-white text-bold card-header">Alan Adı Sorgula</div>
                    <div class="card-body">
                        <div>
                            <jet-input placeholder="Alan adınız giriniz Örn : webhostinginiz.com" type="text"
                                       class="mt-1 block w-full" v-model="form.search" required
                                       autofocus
                                       autocomplete="query"/>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="float-left 2xl:font-bold" v-if="footer">
                            <span class="text-red-600">{{ domain }}.com</span> alan adının uygun olması durumunda sadece
                            <span
                                class="text-red-600">15 ₺</span> 'ye sahip olabilirisiniz.
                        </div>
                        <jet-button :class="{ 'opacity-25': processing }" class="float-right" :disabled="processing">
                            <svg v-if="processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                        stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            Sorgula
                        </jet-button>
                    </div>
                </div>
            </form>
            <div class="pt-5">
                <table
                    class="table table-striped">
                    <thead>
                    <tr class="bg-teal-400 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
                        <th class="p-3 text-left">Alan Adı</th>
                        <th class="p-3 text-left">Uygunluk</th>
                        <th class="p-3 text-left">Fiyat</th>
                        <th class="p-3 text-left"></th>
                    </tr>
                    </thead>
                    <tbody class="flex-1 sm:flex-none">
                    <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0" v-for="domain in result" :key="domain.domain">
                        <td class="border-grey-light border hover:bg-gray-100 p-3 truncate">{{ domain.domain }}</td>
                        <td class="border-grey-light border hover:bg-gray-100 p-3 truncate">
                            {{ domain.status == true ? "Boş" : "Dolu" }}
                        </td>
                        <td class="border-grey-light border hover:bg-gray-100 p-3 truncate">{{ domain.price }} ₺</td>
                        <td class="border-grey-light border hover:bg-gray-100 p-3 truncate">
                            <jet-button @click="addCart(domain)" :class="{ 'opacity-25': cartProcessing }" class="2xl:focus:bg-green-700" :disabled="cartProcessing">
                                <svg v-if="processing" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                                     xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                            stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor"
                                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                Sepete Ekle
                            </jet-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </app-layout>
</template>

<script>
import JetAuthenticationCard from '@/Jetstream/AuthenticationCard'
import JetAuthenticationCardLogo from '@/Jetstream/AuthenticationCardLogo'
import JetButton from '@/Jetstream/Button'
import JetInput from '@/Jetstream/Input'
import JetCheckbox from "@/Jetstream/Checkbox";
import JetLabel from '@/Jetstream/Label'
import JetValidationErrors from '@/Jetstream/ValidationErrors'
import AppLayout from "@/Layouts/AppLayout";


export default {
    components: {
        JetAuthenticationCard,
        JetAuthenticationCardLogo,
        JetButton,
        AppLayout,
        JetInput,
        JetCheckbox,
        JetLabel,
        JetValidationErrors
    },
    data() {
        return {
            form: this.$inertia.form({
                search: '',
                terms: false,
            }),
            result: null,
            processing: false,
            animation: null,
            footer: null,
            domain: null,
            cartProcessing: false,
        }
    },
    name: "Search",
    methods: {
        domainSearch() {
            this.result = null;
            this.processing = true;
            this.footer = true;
            this.domain = this.form.search;
            this.animation = "bg-rose-600 hover:bg-rose-500 focus:border-rose-700 active:bg-rose-700";
            axios.post(this.route('domain.available'), {query: this.form.search})
                .then(res => {
                    this.result = res.data;
                    this.processing = false;
                });
        },
        addCart(domain){
            this.cartProcessing = true;
            axios.post(this.route('cart.add'), domain)
                .then(res => {
                    this.cartProcessing = false;
                    console.log(res.data)
                });
        },
    },
}
</script>

<style scoped>

</style>