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

【问题标题】：Vue select change event firing before I trigger any action在我触发任何操作之前触发 Vue 选择更改事件
【发布时间】：2020-03-31 14:42:58
【问题描述】：

我有一个 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 个数据项，包括使用 v-for 循环时丢失的 idSection1

<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
}

在此先感谢

【问题讨论】：

当您使用@change 而不是@input 时会发生什么？
它仍然被称为相同的东西
您是否在 js 代码中的任何位置更新 formModel.idSection1 值？
据我所知，对代码库进行了全面搜索，更新了问题并添加了更多细节，因为这可能会有所帮助！谢谢
我不确定您的情况。也许您可以尝试使用简单的选择和带有 v-for 的选项为此创建一个简单的演示，它来自 jsFiddle 或代码沙箱上的一个小硬编码数组，看看您是否可以重新创建问题。如果您也可以通过简单的演示重新创建问题，请在此处发布，以便其他人也可以查看。

标签： javascript vue.js vue-cli vee-validate

【解决方案1】：

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

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

【讨论】：