Vue выберите изменение события, прежде чем я инициирую какое-либо действие - PullRequest
Новая
       35

Vue выберите изменение события, прежде чем я инициирую какое-либо действие

0 голосов
/ 31 марта 2020

У меня есть приложение Vue, которое, кажется, запускает событие изменения даже до того, как я изменил выбор, недавно попробовал вместо этого @input, но все же происходит то же самое (как показано ниже)

Обратите внимание, что я пробовал @change и @input, и событие по-прежнему срабатывает при загрузке элементов управления

Теперь это работало до того, как я внес css изменения в область действия компонента, так что он не ' Эффект окружающего css. Но я не могу понять, почему это будет иметь какое-либо значение.

Кто-нибудь знает, почему при добавлении тега параметров и содержимого может произойти событие изменения? 

<div class="form-group" :class="{formError: errors.has('formSection')}">
    <label for="formSection">Section*</label>
    {{ formModel }}
    <select
        v-model="formModel.idSection1"
        class="form-control"
        id="formSection"
        name="formSection"
        @input="onChangeSectionLevel1">
        <option v-for="sectionLevel1 in formModel.sectionLevel1" 
                                    v-bind:value="sectionLevel1.value" 
                                    v-bind:key="sectionLevel1.id">
                                    {{ sectionLevel1.value }}
        </option>
    </select>                                
    <span v-if="errors.has('formSection')">This field is required</span>
</div>

Как только я добавлю в тег options, который проходит по элементам, вызываемым функцией onChangeSectionLevel1. Я думал, что это может быть очень подтверждено, но убрал это и все еще происходит. 

methods: {
   onChangeSectionLevel1() {
      alert("changed");
      ...
   }
}

Обновление:

Я заметил, что если я распечатываю объект, который связан, я получаю это, в котором отсутствует элемент idSection1 . 

{
    "idSection2": null,
    "idSection3": null,
}

Если я затем просто добавлю фиктивную опцию, как показано ниже, то я смогу увидеть свои 3 элемента данных, включая idSection1, который отсутствует, если я oop с помощью v-for 

<select
    v-model="formModel.idSection1"
    class="form-control"
    id="formSection"
    name="formSection"
    @change="onChangeSectionLevel1">
    <option>Hello World</option>
</select>

Элемент данных по-прежнему имеет idSection1 в списке 

{
    "idSection1": null,
    "idSection2": null,
    "idSection3": null
}

Большое спасибо заранее

1 Ответ

0 голосов
/ 01 апреля 2020

Не совсем ответ, но приведенный выше код найден и работает, как и ожидалось, в js fiddle

https://jsfiddle.net/andrewp37/a4obkhd5/1/

Код: 

<div id="app">
  <label for="formSection">Section*</label>
  {{ formModel }}
  <select
          v-model="formModel.idSection1"
          class="form-control"
          id="formSection"
          name="formSection"
          @change="onChangeSectionLevel1">
    <option v-for="sectionLevel1 in formModel.sectionLevel1" 
            v-bind:value="sectionLevel1.value" 
            v-bind:key="sectionLevel1.id">
      {{ sectionLevel1.value }}
    </option>
  </select>  
</div>

new Vue({
  el: "#app",
  data: {
    formModel: {
        idSection1: null, 
      sectionLevel1: [
        {
                    id: 1, 
          value: "Section 1"
        }
      ]
    }
  },
  methods: {
    onChangeSectionLevel1() {
     alert("changed");
    }
  }
})

Я заметил, что с добавлением множества точек останова модель заменяется после монтирования страницы.

...