Value !== toggle data

[andrelec1]

I have a personal component for displaying a list of data ...
I use a slot for passing a custom template for lines

each line have a toggle button ... and i listent the 'change' event, if value change, send new value on my api and when api response, call a refresh for new data....

But the toggle isn't reactive ! i don't know why ...

i use this for refreshing my data :

refresh_data(dataRef, data) {
    if (typeof dataRef !== 'undefined') {
      _.each(data, (value, key) => {
        if (key !== 'id') {
          if (_.isObject(value) && !_.isArray(value)) {
            this.refresh_data(dataRef[key], value);
          } else {
            this.$set(dataRef, key, value);
          }
        }
      });
    }
  },
  async refresh() {
    this.isLoading = true;
    const fn = this.$ajax[this.method];
    await fn(this.uri, this.data, this.config).then((items) => {
      if (items.length < this.items.length) {
        const deletedData = _.differenceWith(this.items, items, (x, y) => x.id === y.id);
        deletedData.forEach((data) => {
          this.$delete(this.items, _.findIndex(this.items, data));
        });
      }
      const updatedData = _.differenceObj(items, this.items, true);
      updatedData.forEach((data) => {
        const dataRef = this.items.find(x => x.id === data.id);
        if (typeof dataRef !== 'undefined') {
          this.refresh_data(dataRef, data);
        } else {
          this.$set(this.items, this.items.length, data);
        }
      });
      this.isLoading = false;
      this.init = true;
    });
  },

and in my render :

 <template slot="tab-list-content" slot-scope="ctx">
          <td class="check">
            <toggle-button
              :width="80"
              :height="30"
              :sync="true"
              :value="ctx.item.item.check !== null"
              :color="{checked: '#16a085', unchecked: '#e74c3c'}"
              :labels="{checked: checkDate(ctx.item.item.check), unchecked: $t('form.pending')}"
              @change="onChangeToggleCheck(ctx.item.item)"
            ></toggle-button>
          </td>
          <td v-if="!companySelected" class="site">{{ ctx.item.item.site_name }}</td>
          <td class="task" :class="checkDeadline(ctx.item.item)">{{ ctx.item.item.text }}</td>
          <td class="date" :class="checkDeadline(ctx.item.item)">{{ ctx.item.item.deadline | moment('Do MMMM') }} </td>
        </template>

[JasonBai007]

I have the same problem

[JasonBai007]

I just resolved it by set 'sync' to true.

[andrelec1]

i found a solution now ;/ forget to close the ticket ...

in fact this issue is not related with vue-js-toggle-button, but with a strange behaviour (in first place) in Vuejs.
As far as i found, Vue js have some code for optimize the dom editing...
The documention try to speak about this only on collection rendering ( v-for ) but in fact this is use absolutly every where ^^

if you have simple v-if else like this :

<div v-if="var1">value1</div>
<div v-else>value2</div>

In your dom you avec the div with the value1.
When you switch the value ( var1 ),
you think entire div is remove and replace with the other, but in fact the div element isn't removed ...
Only the content of the div is switch
(content switch is very less expensive than remove / add DOM element)
For avoiding this features use unique the :key attribute for each element...

The result can be strange in first place , but if i look closely its totaly normal ...

<p v-for="item in items">{{ item }}</p>
and
<p v-for="(item, idx) in items" :key="idx">{{ item }}</p>
is the same ( default comportement ) ...

So, vueJs is somethink like 'data drive rendering' so you work on data, and data call rendering ..

Step 1 : 3element, all true ...

Step 2: you set the second element to false ...

Step 3: data set the render to false

Step 4: remove the data 2 from the collection , emit event collection change

Step 5: rendering with optimisation / use :key for found what élément is change ...

And TADAAAA !!! data desync from rendering ;)

So always put :key and always use something glue to your data for idx

[andrelec1]

Hoo, i just see the documentation was updated.
😃 https://vuejs.org/v2/guide/list.html

[euvl]

That is really detailed and nice explanation. Thank you for it and your time 👍 🙏