v-model 并不总是在 Vue 中更新答案

【问题标题】：v-model not always updating in Vuev-model 并不总是在 Vue 中更新
【发布时间】：2020-01-17 10:07:56
【问题描述】：

小问题

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

示例

我在 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-component 调用的，它工作正常。最后，selectedItemsPipedList 包含从select-component 中选择的项目，看起来像"1|2|3"，并且此值绑定到chosenItemsForm 中的输入字段。当从 basket-component 调用方法 confirm 时，此表单将发布到 Laravel 后端，并且发布请求包含选择的项目作为管道列表。到目前为止，一切顺利。

从basket-component 调用方法stopAll，它将从数组中删除所有选定的项目。因此它会用一个空数组调用方法updateSelectedItems，这将清除selectedItems数组，然后清除selectedItemsPipedList。之后，调用确认将再次发布表单。但是，post 值仍然包含所选项目（例如 '1|2|3'），而不是 ""。看起来我的表单中的v-model 没有更新，这很奇怪，因为它在选择项目时确实有效。为什么添加项目时它起作用，而删除所有项目时不起作用？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

我相信您在这里遇到了时间问题。属性的值还没有传播到 DOM，所以表单提交是不正确的。试试这个：

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

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

【讨论】：