Reactivity Checked item

[Dysey]

Hi,

I used the context menu to add member of an issue when onClick but the checked value of this item is not updated.

{
  label: t('members'),
  children: members.map(member => ({
    label: member.name,
    checked: issue.value.members?.find(m => m.id === member.id) ? true : false,
    clickClose: false,
    onClick: () => {
      if (issue.value.members.find(m => m.id === member.id)) {
        issue.value.members = issue.value.members.filter(m => m.id !== member.id);
      } else {
        issue.value.members.push(member);
      }
    },
  })),
}

I clicked on it, the issue is updated because we can see the number 1 on issue behind but member item is not checked on menu

[imengyu]

Hi, Please check Vue.js docs about reactivity.

The expression of checked that you write will only be evaluated once when MenuData is created, and it will be fixed to the value at the moment of creation and will not change.

You can wrapper your expression with computed, so it will re-evaluate when its reactive dependencies have changed.

checked: computed(() => issue.value.members?.find(m => m.id === member.id) ? true : false),