Conversation

sam0212

…keys like [d, b, b, e, ....], when the second key "b" Vnode by new children, the vnodeToMove will be undefined, so need add a condition for vnodeToMove

fix an error when diff , when before : old keys like [a, b, c ...] new keys like [d, b, b, e, ....], when the second key "b" Vnode by new children, the vnodeToMove will be undefined, so need add a condition for vnodeToMove

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

If adding a new feature, the PR's description includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

…keys like [d, b, b, e, ....], when  the second key "b" Vnode by new children, the vnodeToMove will be undefined, so need add a condition for vnodeToMove

fix an error when diff , when before : old keys like [a, b, c ...] new keys like [d, b, b, e, ....], when  the second key "b" Vnode by new children, the vnodeToMove will be undefined, so need add a condition for vnodeToMove
@sam0212
// Child.vue
<template>
  <div>
    {{ data.key }}
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
};
</script>
// Wrapper.vue
<template>
  <div>
    <div>
      <Child v-for="item in list" :key="item.key" :data="item" />
    </div>
    <div><button @click="changeList">changeList</button></div>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  data() {
    return {
      list: [
        {
          key: 'A',
        },
        {
          key: 'B',
        },
        {
          key: 'C',
        },
      ],
    };
  },
  methods: {
    changeList() {
      this.list = [
        {
          key: 'D',
        },
        {
          key: 'B',
        },
        {
          key: 'B',
        },
        {
          key: 'E',
        },
      ];
    },
  },
};
</script>

@posva

Keys cannot be repeated. Normally there is already an error for this but this shouldn’t be « fixed ». It’s supposed not to work

Sign up for free to join this conversation on . Already have an account? Sign in to comment
None yet

Successfully merging this pull request may close these issues.