Table row is not reactive when conditional parameter return true?

      <tbody>
          <template v-if="dataTable">
               <tr is="devicesRow" v-for="(data,index) in dataTable" :data="data" :index="index" :key="index"></tr>
          </template>
           <template v-else>
               <tr class="text-center" >
                <td class="text-center" colspan="6"><b-spinner  style="width: 4rem; height: 4rem;" variant="primary" type="grow" label="Spinning"></b-spinner></td>
              </tr>
           </template>
         </tbody>

Please provide more code related to your issue. Without it, it’s hard for us to help. You can refer to our guide on asking for help for more information. Thanks!

Thanks for replaying and giving advice, I am going to use them later.:slight_smile: My propblem is that;
In mounted hook I dispatched my action to get data from api and store it in vuex, and by dataTable which is in computed hook I get data I stored to vuex by actions. Although I have been seeing dataTable data in vue devtools, table tbody v-if does not render itself,b-spinner is always active ,

Are you sure that dataTable is Array? May be it is object

Yeah I am sure about it , it is an array

Could we see your getdeviceswithLocation function script?
(and while I am there, your function’s name is pretty weird, shouldn’t it be getDevicesWithLocation?)

Also post your console.table(dataTable). Obviously your problem is near from there.

1 Like

it’s name is getDevicesWithLocation anymore :slight_smile: de

dataTAble is being shown in vueDevtools like that.it is array of Object.

First, you should use :key=“data.id” instead of index, so VueJS will maintain the state of each row(https://vuejs.org/v2/guide/list.html#Maintaining-State).

Then, a simple thing i didn’t see before: you don’t display any device information:
You should do something like:

<tr is="devicesRow" v-for="(data, index) in dataTable" :data="data" :index="index" :key="data.id">
    <td> {{ data.id }} </td>
    <td> {{ data.is_online }} </td>
    <td> {{ data.last_online }} </td>
    <td> {{ data.name }} </td>
    <td> {{ data.lon }}, {{ data.lat }} </td>
    <td> Some links to actions </td>
</tr>
1 Like

When dataTable values change by computed hook, table row does not react itself ? In devtools, dataTAble change but table row does not refresh itself?