v-модель не всегда обновляется в Vue - PullRequest
Новая
       2

v-модель не всегда обновляется в Vue

0 голосов
/ 17 января 2020

Короткий вопрос

v-model, который связывает строку с полем ввода, не будет обновляться в , в некоторых случаях .

Пример

Я использую Vue в приложении Laravel. Это основной компонент, который содержит два других компонента: 

<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. Когда метод confirm вызывается из basket-component, эта форма публикуется в Laravel бэкэнде, и запрос на публикацию содержит выбранные элементы в виде конвейерного списка. Пока все хорошо.

Метод stopAll вызывается из basket-component, и он удалит все выбранные элементы из массива. Поэтому он вызовет метод updateSelectedItems с пустым массивом, который очистит массив selectedItems, а затем очистит selectedItemsPipedList. После этого вызывается подтверждение, которое снова отправит форму. Но почтовое значение по-прежнему содержит выбранные элементы (например, «1 | 2 | 3») вместо "". Похоже, что v-model в моей форме не обновляется, что странно, потому что он работает при выборе элементов. Почему это работает при добавлении элементов, а не при удалении всех элементов?

1 Ответ

1 голос
/ 17 января 2020

Я полагаю, у вас есть проблема со временем. Значение свойств еще не было передано в DOM, поэтому отправка формы неверна. Попробуйте вместо этого: 

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

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