How to use Vue template to update on data change-CodePudding

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 >
                Dashboard
            </h2>
            
        </template>

        <div >

            <div >
                <div >
                    <div >
                        <a @click="refresh()">Refresh</a> <p v-if="deleting">Deleting...</p> {{ deleting }}
                       <div >
                            <div >
                                <div >
                                <div >
                                    <table >
                                    <thead >
                                        <tr>
                                        <th scope="col" >Name</th>
                                        <th scope="col" >Details</th>
                                        <th scope="col" >Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody  >
                                        <tr v-for="item of items" :key="item"   >
                                        <td >
                                               <div > {{ item.name }} </div>
                                            
                                        </td>
                                        <td >
                                            <div >{{ item.details}} </div>
                                        </td>
                                          <td >
                                            <div ><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.

CodePudding user response：

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")
}