在我触发任何操作之前触发 Vue 选择更改事件

Question

我有一个 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>一旦我添加了遍历项目的选项标签，就会调用 onChangeSectionLevel1 函数。我认为这可能是 vee-validate 但把它拿出来仍然会发生。methods: {   onChangeSectionLevel1() {      alert("changed");      ...   }}更新：我注意到，如果我打印出正在绑定的对象，我会得到这个缺少idSection1项目。{    "idSection2": null,    "idSection3": null,}如果我然后只放一个如下所示的虚拟选项，那么我可以看到我的 3 个数据项，包括 idSection1 如果我使用 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}提前谢谢了

Answer 1

不是真正的答案，但上面的代码是在 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");

    }

  }

})

我注意到添加了很多断点后，模型会在页面安装后被替换。