1

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.

Improve this question
3
  • To clarify i am binding the value of deleting to the template, but it doesent change even after the method is called on click
    – Noble Eugene
    Commented Feb 18, 2022 at 8:18
  • put all relevant information in the question - I'd also recommend tagging with vuejs3 tag - because, wow, vue3 is different!!!
    – Bravo
    Commented Feb 18, 2022 at 8:24
  • When you say "None of the other answers…", we expect to see a list of the ones you tried and an explanation of why they didn't work, so we actually have an idea what you tried. Without that we have to guess, and that trick never works well. Please see "How to Ask", "Stack Overflow question checklist" and "minimal reproducible example" and all their linked pages.
    – the Tin Man
    Commented Feb 20, 2022 at 1:09

1 Answer 1

Reset to default
2

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.