VUE3 data is not reactive

April 7, 2023

I have a simple HTML element with an @click event on it.
When I press on a tag, in the VUE console, the value didn’t update, but, in Google Chrome Inspect Element Console, the idClient value it shows.
The value from VUE console will update only after I press the refresh button (top right corner) or if I make other action in page, like selecting something from another select option or something.

What is the problem?

<a @click="asd(item);" v-for="(item, index) in listaRezultateLiveSearchCautaClient" :key="item.idClient" class="flex items-center py-1 border-b last:border-b-0 text-xs gap-2">
 <div>
  <div class="flex flex-col py-1">
   <span v-if="item.DENUMIRE !== '' " class="font-semibold">@{{ item.denumireJuridica === ''? 
    item.denumireFizica :  item.denumireJuridica}}</span>
   <span class="text-gray-400">@{{ item.localitate + ', ' + item.judet }}</span>
  </div>
 </div>
</a>

In data I have:

data() {
 return {
  modalAddActivitateClient: {
   idClient: 0,
  }
 }
}

In methods I have:

methods: {
 asd(item) {
  console.log(item.idClient)
  this.modalAddActivitateClient.idClient = item.idClient
 }
}

>Solution :

The problem is with Vue Devtools, not with Vue or your code.

Your code should work. modalAddActivitateClient.idClient is reactive.

Check the playground.

const App = {
 data() {
   return {
    modalAddActivitateClient: {
     idClient: 0,
    },
    listaRezultateLiveSearchCautaClient: [
        { idClient: 1 },
        { idClient: 2 },
        { idClient: 3 }
    ]
  }
 },
 methods: {
   asd(item) {
    console.log(item.idClient)
    this.modalAddActivitateClient.idClient = item.idClient
   }
 }
}

Vue.createApp(App).mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }
a {text-decoration: underline; color: blue; cursor: pointer}

<div id="app" v-cloak>
  modalAddActivitateClient: {{modalAddActivitateClient}}
  <a @click="asd(item);" v-for="(item, index) in listaRezultateLiveSearchCautaClient" :key="item.idClient" class="flex items-center py-1 border-b last:border-b-0 text-xs gap-2">
  <div>
  idClient: {{item.idClient}}
  </div>
  </a>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>