Vuejs 切片功能不响应

Pat*_*ive 4 laravel vue.js

我正在使用 - laravel -blade -vuejs

对于一种情况,我的拼接对阵列没有反应。所以我有一个 ul/li (我已经删除了 css 和其他东西)

<ul>
        <template v-for="(user, index) in availableUsers"  >
        <li v-bind:data-user="user.id" v-bind:data-index="index" >
            @{{user.fullName}}
            <button id=btnRemove>                            
        </li>
   </template>
</ul>
Run Code Online (Sandbox Code Playgroud)

在我的 vue 实例代码中,我有一个函数removeFromAvailable。我调用 myvue.availableUsers.slice(index, 1)。该方法获得良好的索引。

removeFromAvailable : function(index) {
        console.log(index);
        myVue.availableUsers.slice(index, 1);
}
Run Code Online (Sandbox Code Playgroud)

它仍然在列表中。我很困惑,因为这是第一次它不起作用。

知道为什么它没有反应吗?

Dwi*_*ght 7

我相信您需要再次设置变量。slice只是返回更改后的数组的副本,它不会更改原始实例。

removeFromAvailable(index) {
  this.availableUsers = this.availableUsers.slice(index, 1);
}
Run Code Online (Sandbox Code Playgroud)

  • 另一种方法是使用 splice 方法,因为它会修改原始数组,只是不添加第三个参数。 (3认同)