Блог

У меня есть каскадный выпадающий список с использованием VueJS (1.0), и у меня возникла проблема, когда изменение в модели Vue не отражается в DOM.

Элементы в выпадающем списке должны быть объектом, но после выбора я пытаюсь изменить значение свойства / выпадающего списка на значение int.

Я делаю это с помощью события watch, которое обрабатывает необходимую информацию из объекта, затем использует $set в свойстве, чтобы установить для него требуемый int.

Используя инструменты разработчика VueJS Chrome, я вижу, что изменение отражено в свойстве компонента, но при отправке формы оно публикуется в виде строки [object Object] , как будто DOM никогда не обновлялся.

Вот соответствующий выпадающий список в шаблоне:

 <select :disabled="releases.length amp;< 1" v-model="release" options="releases" class="form-control input-sm" name="{{formname}}[release_id]">
    <option selected="selected" value="">Choose Release...</option>
    <option v-for="obj in releases" v-bind:value="obj">{{obj.text}}</option>
</select>
  

И вот событие просмотра:

 "release": function() {
   this.$parent.$data.promos = this.release.promos;
   this.$set('release', this.release.id);
}
  

После изменения выпадающего списка обновляется promos свойство root, и, согласно инструментам разработки, release свойству компонента правильно присваивается значение id

Но когда форма отправлена, я просто получаю строковое представление объекта!

Кто-нибудь знает, что я здесь делаю не так; или это ошибка VueJS / есть ли обходной путь?

Спасибо!

Я не смогу найти ошибку в вашем коде, если не смогу поиграть с ней в jsFiddle или эквивалентном.

Но у меня есть альтернативная реализация каскадного выпадающего списка для вас здесь:https://jsfiddle.net/mani04/Lgxrcc5p/1 /

Вы можете посмотреть, предоставляет ли это какие-либо указания. В этом примере используется Vue 2.0.3

В приведенном выше примере вашего кода я конкретно не понимаю эту часть:

 <select :disabled="releases.length amp;< 1" ...
  

Это ошибка копирования-вставки? Я надеюсь, что у вас в редакторе есть следующий код:

 <select :disabled="releases.length < 1" ...
  

Атрибут value параметра может быть привязан к объекту в Vue, но браузеру все равно необходимо отобразить значение как допустимый HTML, чтобы объект был преобразован в строку.

Единственное, что вы можете сделать, это добавить скрытое поле в форму со значением, равным идентификатору выбранного объекта release.

Редактировать: Другим вариантом может быть переопределение toString метода прототипа класса для возврата идентификатора объекта.