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

目前尚不清楚您希望看到什么，但是此代码可以正常工作。它按预期工作吗？

chown -R

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;
}

Vue.js 2.0：组件未呈现对象更改

1 个答案: