Динамические множественные формы: изменение параметров выбора на основе предыдущего значения выбора - PullRequest
Новая
       10

Динамические множественные формы: изменение параметров выбора на основе предыдущего значения выбора

0 голосов
/ 05 сентября 2018

Я динамически генерирую дополнительные формы на странице, используя Django Model Formsets. Пользователь может создавать столько форм, сколько ему нужно. Это делается методом Vuejs.

Моя проблема заключается в изменении параметров второго выбора формы, в которой было выбрано первое значение выбора. Я думал о том, чтобы попытаться сфокусироваться или щелкнуть мышью, чтобы получить последнее изменение выбора, но я не уверен, как это сработает.

Я отслеживаю текущее количество форм на странице.

В приведенном ниже примере. Если пользователь изменил form_select_0 на One, мне нужно form_subselect_0, чтобы иметь только опции C и D, но выбор в form_1 не должен изменяться.

Пример: 

<form id = form_0>
    <select id="form_select_0">
    <option value="one">One</option>
    <option value="two">Two</option>
    </select>

    <select id="form_subselect_0">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    </select>
</form>

<form id = form_0>
    <select id="form_select_1">
    <option value="one">One</option>
    <option value="two">Two</option>
    </select>

    <select id="form_subselect_1">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    </select>
</form>

Последующий: Добавлен метод vue (ниже), как я в настоящее время добавляю модели Vuejs в наборы форм Django. Вопрос: есть ли лучший способ? 

addForm: function () {
    this.count++
    let form_count = this.count
    form_count++

    let formID = 'id_form-' + this.count
    incremented_form = this.vue_form.replace(/form-\d/g, 'form-' + this.count)
    this.formList.push(incremented_form)
    this.$nextTick(() => {
        let total_forms = document.getElementsByName('form-TOTAL_FORMS').forEach
        (function (ele, idx) {
            ele.value = form_count
        })
    })
},

1 Ответ

0 голосов
/ 18 октября 2018

Как указано выше, это был мой окончательный ответ из-за отсутствия ответа: 

addForm: function () {
this.count++
let form_count = this.count
form_count++

let formID = 'id_form-' + this.count
incremented_form = this.vue_form.replace(/form-\d/g, 'form-' + this.count)
this.formList.push(incremented_form)
this.$nextTick(() => {
    let total_forms = document.getElementsByName('form-TOTAL_FORMS').forEach
    (function (ele, idx) {
        ele.value = form_count
    })
})},
...