Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Kinger's avatar

Vue.js not updating v-if dynamically

Hi there, I am having a problem, that when a school is updated in Laravel backend and when I redirect back, the v-if directive does not update. I have to reload page to see the results.

Here is my code

<td v-if="!isSchoolDeleted(school)" class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3">
    <Link :href="route('school.edit', [school])" class="text-yellow-500 hover:text-yellow-600">
        Edit
     </Link>
</td>
<td v-if="!isSchoolDeleted(school)" class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3">
     <button type="button" @click="toggleDeleteModal(school)" class="text-red-500 hover:text-red-600">
          Delete
     </button>
</td>
<td v-else class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3">
    <Link method="put" :href="route('school.restore', [school])" class="text-green-500 hover:text-green-700/90">
         Restore
     </Link>
</td>

Thanks for your help

0 likes
0 replies

Please or to participate in this conversation.