Home > database >  Vue template not updating on data change
Vue template not updating on data change

Time:02-18

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

Read more at Reactivity Fundamentals.

  • Related