Vue.js 2.0: компонент не отображает изменение объекта

Question

У меня есть объект, который будет изменен при событии щелчка, однако для его обновления требуется обновление или нажатие другого элемента.Что мне нужно сделать, чтобы объект обновлялся без ручного обновления или нажатия чего-либо еще?

Мой код:

<template>
    <div class="userTable">
        <input type="text" v-model="query" placeholder="Search for a user" @focus="dimUsers()" @blur="undimUsers()" @keyup="selectedUser()">
        <ul>
              <li v-for="user in userList.users" :key="user.localized_name">
                  <img v-bind:src="user.portrait" class="userPortrait" :class="{'selectedUser': selectedUserPortrait.includes(user.portrait), 'dimmed': searching}" @click="loadUser(user)">
              </li>
        </ul>
    </div>
</template>
....
props: {
    userList
}

data: function () {
    return {
        userSelected: {
            "name": '',
            "portrait": '',
        },
        searching: false,
        query: '',
        selectedUserPortrait = []
    }
}

methods: {
    loadUser: function (user) {
        this.userSelected = user
        return;
    }
    dimUsers: function () {
        this.searching = true
        return;
    }
    undimUsers: function () {
        this.searching = false,
        this.selectedUserPortrait = []
        this.query = ''
        return;
    },
   selectedUser: function () {
       this.selectedUserPortrait = [];
       for (let i=0; i<userList.users.length; i++) {
           if (this.userList.users[i].localized_name.toLowerCase().includes(this.query.toLowerCase())) {
              this.selectedUserPortrait.push(this.userList.users[i].portrait)
            } else {
              this.selectedUserPortrait.splice(i, 1);
            }
      } return;
   }
}

Answer 1

Не совсем ясно, что вы ожидаете увидеть, но этот код работает так, как я ожидаю.Это работает, как вы ожидаете?

new Vue({
  el: '#app',
  data: {
    userList: {
      users: [{
          portrait: 'https://via.placeholder.com/50?text=p1',
          localized_name: 'one'
        },
        {
          portrait: 'https://via.placeholder.com/50?text=p2',
          localized_name: 'two'
        },
        {
          portrait: 'https://via.placeholder.com/50?text=p3',
          localized_name: 'three'
        },
        {
          portrait: 'https://via.placeholder.com/50?text=p4',
          localized_name: 'four'
        },
        {
          portrait: 'https://via.placeholder.com/50?text=p5',
          localized_name: 'five'
        },
      ]
    },
    userSelected: {
      "name": '',
      "portrait": '',
    },
    searching: false,
    query: ''
  },
  computed: {
    selectedUserPortrait() {
      return this.query ?
        this.userList.users.filter((u) =>
          u.localized_name.toLowerCase().includes(this.query.toLowerCase())
        ).map((u) => u.portrait) : [];
    }
  },
  methods: {
    loadUser: function(user) {
      this.userSelected = user;
      return;
    },
    dimUsers: function() {
      this.searching = true
      return;
    },
    undimUsers: function() {
      this.searching = false;
      this.query = '';
    }
  }
});

.selectedUser {
  border: solid 2px red;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <input type="text" v-model="query" placeholder="Search for a user" @focus="dimUsers()" @blur="undimUsers()">
  <ul>
    <li v-for="user in userList.users" :key="user.localized_name">
      <img v-bind:src="user.portrait" class="userPortrait" :class="{'selectedUser': selectedUserPortrait.includes(user.portrait), 'dimmed': searching}" @click="loadUser(user)">
    </li>
  </ul>
  <div>{{userSelected.localized_name}}</div>
</div>