Правдивость или ложность тернарного оператора в v-bind vuejs

Question

Я использую VueJS 2 в проекте. Я хочу определить определенное значение с помощью v-bind, используя тернарный оператор. Мое значение либо правдиво (объект), либо ложно (не определено)

Вот код:

<b-icon
    class="select-icon"
    pack="fas"
    :icon="selectedUsers[user.objectID] ? 'circle' : 'check-circle'"
    size="is-medium"
    type="is-primary"
/>

Это необходимо для определения, какой значок должен появиться. С прямым истинным или ложным он работает, но не с правдой или ложью. Есть ли способ обойти это?

Я попытался преобразовать его в логическое значение с помощью !!selectedUsers[user.objectID]) и войти в него с помощью: console.log(!!this.selectedUsers[user.objectID]);

, но не работает

Вот the console.log ():

РЕДАКТИРОВАТЬ: вот код, который должен изменить моих selectedUsers, я думаю, что здесь я делаю что-то не так, я проверю срабатывает ли рендеринг или нет

methods: {
    selectUser(user) {
      console.log(user);
      if (this.selectedUsers[user.objectID]) {
        delete this.selectedUsers[user.objectID];
      } else {
        this.selectedUsers[user.objectID] = user;
      }
      console.log('this.selectedUsers: ', this.selectedUsers);
      console.log(!!this.selectedUsers[user.objectID]);
    },
  },

Answer 1

Мутация должна быть последним подходом, она создает беспорядок, когда последовательность вызывающих функций удачна.

Почему бы вам просто не использовать вычисленные?

Судя по коду, вы хотите достичь значения 'circle' ИЛИ ​​'check-circle'

  <b-icon
    class="select-icon"
    pack="fas"
    v-bind:icon="check"
    size="is-medium"
    type="is-primary"
  />

  computed: {
      check(){
         return selectedUsers[user.objectID] ? 'circle' : 'check-circle';
      }

  }

Надеюсь, я понимаю, чего вы пытаетесь достичь. Если нет, дайте еще несколько ссылок. Я сделаю все возможное, чтобы решить эту проблему.

Answer 2

После некоторого поиска выясняется, что вложенный объект, не объявленный в элементе data элемента VueJS, не будет отслеживаться, поэтому при изменении не будет выполняться рендеринг.

Чтобы они были реактивными, мы необходимо установить или удалить их с помощью определенных c vue методов:

 methods: {
    selectUser(user) {
      if (this.selectedUsers[user.objectID]) {
        this.$delete(this.selectedUsers, user.objectID);
      } else {
        this.$set(this.selectedUsers, user.objectID, user);
      }
    },

С этим кодом запускается рендеринг. Я не знал об этой особенности.

Чтобы узнать больше об этом, проверьте эту официальную документацию