Vue template not updating on data change

February 18, 2022

I have this component.vue:

<script setup>
const { Inertia }=require("@inertiajs/inertia")
const { useAttrs, watch }=require("@vue/runtime-core")

defineProps({
    auth:Object,
    items:Object
})
const refresh = ()=>{
    Inertia.reload()
}
var deleting = "eee"
const deleteItem = ()=>{
    deleting = "ss"
    console.log(deleting)
   // Inertia.post("/delete?item=id")
}
</script>

<template>
    <Head title="Dashboard" />

    <BreezeAuthenticatedLayout active="main">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
            
        </template>

        <div class="py-12">

            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <a @click="refresh()">Refresh</a> <p v-if="deleting">Deleting...</p> {{ deleting }}
                       <div class="flex flex-col">
                            <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                                <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                                <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                                    <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200" >
                                        <tr v-for="item of items" :key="item"   >
                                        <td class="px-6 py-4 whitespace-nowrap">
                                               <div class="text-sm text-gray-900"> {{ item.name }} </div>
                                            
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-900">{{ item.details}} </div>
                                        </td>
                                          <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-900"><button @click="deleteItem">Delete</button> </div>
                                        </td>
                                        </tr>

                                        <!-- More people... -->
                                    </tbody>
                                    </table>
                                </div>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>

On clicking delete with the event @click, the function deleteItem is called which changes the value of deleting. The value is being changed as i can see in the console but the DOM remains the same when it should change as well, How can i fix this and get the DOM to change as well. None of the other answers on stack overflow have worked?

>Solution :

You should use ref to make it reactive:

import { ref } from "vue";

...

var deleting = ref("eee");

const deleteItem = () => {
    deleting.value = "ss";

    console.log(deleting.value); // ss
   // Inertia.post("/delete?item=id")
}