Vue select 在触发任何操作之前更改事件触发

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");
    }
  }
})

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

Vue select 在触发任何操作之前更改事件触发

Vue select change event firing before I trigger any action

javascript

vue.js

vue-cli

vee-validate