[2.6] DOM isn't sync with the data

Version

2.6.6

Reproduction link

2.6.6 https://jsfiddle.net/6gn53fzj/ 2.5.22 https://jsfiddle.net/3mp518t7/

Steps to reproduce

• Click on test button

What is expected?

Only “a” checkbox to be checked.

What is actually happening?

Please take a look at the test method. In this function I simultaneously trigger click on two checkboxes, after which I wait for the DOM to be patched and finally I update checked array with the value ['a']. I expect at this point that only checkbox a is checked, but that’s not the case here. For some reason inputs c and d also stays checked. Even if I wait some extra time after nextTick or enforce component’s update before changing checked value, it does not help. I undestend this issue is related to reverting nextTick to use Microtask but still can’t figure out why this happens and what workaround can I apply to fix it. Appreciate your help. Thanks 😃

[yyx990803]

@sqal good to know.

To summarize: the reason why you have to await this.$nextTick() after each click is to give Vue the opportunity to sync the state changes triggered by a click to all the sibling checkboxes.

I’m afraid this will have to be a wontifx because:

1. This only happens in test scenarios and doesn’t affect end users;
2. It has a workaround (await nextTick after each click).

[sqal]

@yyx990803 In my case, yes, you’re right. After upgrading Vue to 2.6.6 I saw bunch of my unit tests where I manually trigger UI event started to fail. Here’s an example of a test with a fix I had to add (suggested by posva):

test('v-model: array', async () => {
  const vm = new Vue({
    components: {
      UiCheckbox,
    },
    data: {
      checked: ['foo'],
    },
    template: `
      <div>
        <ui-checkbox
          v-for="v in ['foo', 'bar', 'xyz']"
          v-model="checked"
          :value="v"
          :name="v"
          :key="v">
        </ui-checkbox>
      </div>
    `,
  }).$mount();
  const getInput = name => vm.$el.querySelector(`input[name="${name}"]`);

  expect(getInput('foo').checked).toBe(true);

  getInput('foo').click();
  expect(vm.checked).toHaveLength(0);
  expect(getInput('foo').checked).toBe(false);

  await Vue.nextTick();

  getInput('xyz').click();
  expect(vm.checked).toEqual(['xyz']);
  expect(getInput('xyz').checked).toBe(true);

  await Vue.nextTick();

  getInput('bar').click();
  expect(vm.checked).toEqual(['xyz', 'bar']);
  expect(getInput('bar').checked).toBe(true);

+ await Vue.nextTick();

  vm.checked = ['foo'];
  await Vue.nextTick();

  expect(getInput('foo').checked).toBe(true);
  expect(getInput('bar').checked).toBe(false);
  expect(getInput('xyz').checked).toBe(false);
});

otherwise it fails in this line:

 FAIL  src/components/Ui/UiCheckbox/UiCheckbox.test.js
  ● [component] UiCheckbox › v-model: array

    expect(received).toBe(expected) // Object.is equality

    Expected: false
    Received: true

      85 |
      86 |     expect(getInput('foo').checked).toBe(true);
    > 87 |     expect(getInput('bar').checked).toBe(false);
         |                                     ^
      88 |     expect(getInput('xyz').checked).toBe(false);
      89 |   });
      90 |

I guess I will have to adjust my other tests the same way… Thank you for detailed response though 😃 And yeah… I haven’t ran into similar problem outside of unit tests.