Javascript 拼接数组不会重新呈现表行Vuejs

我有一个用户表，其中包含来自ajax请求的数据。表大致如下所示：

当管理员编辑用户的用户名时，我希望用户的行使用更改（特别是用户的名字和姓氏）重新呈现

我把桌子做得很好。模型运行良好。在我的edit（）方法中，我的父组件可以很好地接收已编辑的数据，但我似乎无法使用已更改的数据重新呈现目标行。如何更新目标行

我尝试了以下方法，但无效：

• • 我已经把我那排的钥匙调好了
  • 尝试使用Vue.set（）设置我的ListoUsers
  • 尝试使用Vue.set（）代替拼接

这是我的父vue组件，包含以下内容（我删除了不相关的详细信息）：

模板：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email Address</th>
            <th>Created</th>
            <th>Stat</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(user, index) in listOfUsers" :key="'row' + user._id"> 
            <td>{{user.first_name + ' ' + user.last_name}}</td>
            <td>{{user.email}}</td>
            <td>{{user.created}}</td>
            <td>
                <a v-if="user.confirmed" @click="determineButtonClicked(index, 'confirm')"></a>
                <a v-else @click="determineButtonClicked(index, 'unconfirm')"></a>
            </td>
            <td class="buttonCase">
                <a @click="determineButtonClicked(index, 'info')"></a>

                <a v-if="user.blocked" @click="determineButtonClicked(index, 'blocked')"></a>
                <a v-else @click="determineButtonClicked(index, 'block')"></a>

                <a v-if="user.enforce_info === 'required'" @click="determineButtonClicked(index, 'enforceInfoActive')"></a> 
                <a v-else-if="user.enforce_info === 'done'" @click="determineButtonClicked(index, 'enforceInfoChecked')"></a>
                <a v-else @click="determineButtonClicked(index, 'enforceInfo')"></a>

                <modal v-if="usersList[index]" @toggleClickedState="setState(index)" @editUser="edit(index, $event)" :id="user._id" :action="action"></modal>
            </td>
        </tr>
    </tbody>
</table>

名称
电子邮件地址
创建
斯达
行动
{{user.first\u name+''+user.last\u name}
{{user.email}
{{user.created}

剧本

<script>
    export default {
        created: function() {
            let self = this;
            $.getJSON("/ListOfUsers",
            function(data){
                self.listOfUsers = data;
            });
        },
        data: function() {
            return {
                listOfUsers: [],
            }
        },
        methods: {
            edit(index, update){
                let user = this.listOfUsers[index];
                user.firstName = update.firstName;
                user.lastName = update.lastName;

                // this.listOfUsers.splice(index, 1, user)
                this.listOfUsers.$set(index, user)
            }
        }
    }
</script>

导出默认值{
已创建：函数（）{
让自我=这个；
$.getJSON（“/ListoUsers”，
功能（数据）{
self.listOfUsers=数据；
});
},
数据：函数（）{
返回{
用户列表：[]，
}
},
方法：{
编辑（索引、更新）{
让user=this.listOfUsers[index]；
user.firstName=update.firstName；
user.lastName=update.lastName；
//this.listOfUsers.splice（索引，1，用户）
this.listOfUsers.$set（索引，用户）
}
}
}

---

谢谢你的时间和帮助

Vue未在编辑方法中更新，因为未替换对象本身。对象的属性确实会更改，但Vue仅查找要更改的对象引用

要强制数组检测实际对象引用中的更改，您需要替换对象，而不是修改对象。我不知道你到底想怎么做，但这把拼凑在一起的小提琴应该能证明这个问题，这样你就可以解决它了：

简而言之，如果将编辑方法更新为如下所示，则应在模板中看到重新渲染：

methods: {
   edit(index, update){
      let currentUser = this.listOfUsers[index];
      let newUser = {
         first_name: update.firstName,
         last_name: update.lastName,
         email: currentUser.email,
         created: currentUser.created
      }

      this.listOfUsers.splice(index, 1, newUser)
   }
}

---

你可以试试这样

导出默认值{
已创建：函数（）{
让自我=这个；
$.getJSON（“/ListoUsers”，
功能（数据）{
self.listOfUsers=数据；
});
},
数据：函数（）{
返回{
用户列表：[]，
}
},
方法：{
编辑（索引、更新）{
让user=this.listOfUsers[index]；
user.firstName=update.firstName；
user.lastName=update.lastName；
//this.listOfUsers.splice（索引，1，用户）
this.$set（this.listOfUsers，index，user）
}
}
}

什么是

？

edit（index，$event）

中的

$event

如何成为

edit（index，update）{…}

中的

update

。就像它的名字一样，这个组件定义了一个模式弹出窗口。$event是我访问模态组件发出的值的方式。非常感谢。这起作用了。在进行更改之前，我使用Object.assign（）获取对象的副本。