Vue.js v-model不总是在Vue中更新

简短问题

将字符串绑定到输入字段的v模型在某些情况下不会更新

范例

我正在Laravel应用程序中使用Vue。这是主要组件，包含两个其他组件：

<template>
  <div>
    <select-component 
      :items="items" 
      @selectedItem="updateSelectedItems"
    />

    <basket-component 
      :selectedItems="selectedItems" 
      @clickedConfirm="confirm" 
      @clickedStopAll="stopAll"
    />

    <form ref="chosenItemsForm" method="post">
      <!-- Slot for CSRF token-->
      <slot name="csrf-token"></slot>
      <input type="text" name="chosenItems" v-model="selectedItemsPipedList" />
    </form>
  </div>
</template>

<script>
export default {
  props: ["items"],
  data: function() {
    return {
      selectedItems: [],
      selectedItemsPipedList: ""
    };
  },
  methods: {
    updateSelectedItems: function(data) {
      this.selectedItems = data;
      this.selectedItemsPipedList = this.selectedItems
        .map(item => item.id)
        .join("|");
    },
    confirm() {
        this.$refs.chosenItemsForm.submit();
    },
    stopAll() {
      this.updateSelectedItems([]);
      this.confirm();
    }
  }
};
</script>

方法updateSelectedItems是从select组件调用的，可以正常工作。最后，selectedItemsPipedList包含SelectComponent中的选定项，看起来像1 | 2 | 3，该值绑定到chosenItemsForm中的输入字段。当从basket组件调用confirm方法时，此表单将发布到Laravel后端，并且post请求包含作为管道列表的所选项目。到目前为止，一切顺利

---

方法stopAll是从basket组件调用的，它将从数组中删除所有选定的项。因此，它将使用空数组调用updateSelectedItems方法，该方法将清除selectedItems数组，然后清除selectedItemsPipedList。之后，调用confirm，它将再次发布表单。但是，post值仍然包含所选项目，例如“1 | 2 | 3”，而不是。看起来我表单中的v模型没有更新，这很奇怪，因为它在选择项目时确实起作用。为什么它在添加项目时起作用，而在删除所有项目时不起作用？

我相信您在这里遇到了时间问题。属性的值尚未传播到DOM，因此表单提交不正确。请尝试以下方法：

stopAll() {
  this.updateSelectedItems([]);

  //NextTick waits until after the next round of UI updates to execute the callback.
  this.$nextTick(function() {this.confirm()});
}