javascript - Vue.js 2 - 从重新填充的列表中选择的项目不刷新更改

Question

在我的 vue.js 2 组件中给出以下数据集:

data() {
  return {
    listItems: [{
       id: '',
       name: '',
       subItems: []
    }],
    selectedItem: '',
    hasSelectedItem: false
  }
}

我正在使用 REST API 填充 listItems 并在 View 中选择特定项目:

getItems() {
            axios.get(this.base_url + '/items/all', {headers: {Authorization: "Bearer " + this.token}}).then(response => {

                this.listItems = response.data

            }).catch(e => {
                this.errors.push(e)
            });
},

然后在 UI 中的某个时刻，我通过如下方式从 listItems 中选择一个特定的 item:

<el-dropdown size="medium" @command="handleCommand">
<el-button size="small" type="primary">
    Select item<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
    <div v-for="(item) in listItems">
        <el-dropdown-item :disabled="selectedItem === item"
          :command="item">
          {{ item.name }}
      </el-dropdown-item>
  </div>
  <el-dropdown-item divided>
    New Item
  </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

和函数:

handleCommand(selected) {
  this.selectedItem = selected;
  this.hasSelectedItem = true
}

问题是，每当我通过向服务器发送 POST 请求向其 subItems[] 添加新内容并再次调用 getItems() 来刷新 listItems 列表，selectedItem 保持不变，不刷新。

这不应该是引用赋值吗？

正确的做法是什么？

提前致谢!

更新 1 也许我应该以不同的方式重新提出这个问题: 如果我有一个 items 列表， 此外，我有一个 selectedItem 对其中之一的引用， 从列表中对成员更改更新 selectedItem 的正确方法是什么？

Answer 1

你应该避免比较对象的使用 :disabled="selectedItem.id === item.id" 代替 :disabled="selectedItem === item"

同样在您的 data() 方法中使用 selectedItem: {}

data() {
  return {
    listItems: [{
       id: '',
       name: '',
       subItems: []
    }],
    selectedItem: {},
    hasSelectedItem: false
  }
}

更新

您关于通过引用拥有 selectedItem 部分是正确的，但是当您再次从服务器获取项目列表时，您替换了项目列表并丢失了对象引用。从服务器获取数据后，您可以刷新 selectedItem :

getItems() {
axios.get(this.base_url + '/items/all', {
    headers: {
        Authorization: "Bearer " + this.token
    }
}).then(response => {

    this.listItems = response.data
    if (this.selectedItem.id) {
        this.selectedItem = this.listItems.find((item) => {
            return item.id === this.selectedItem.id;
        })
    }


}).catch(e => {
    this.errors.push(e)
});

},