时间戳

首页 > 解决方案 > 如何在输入的更改事件中传递的不仅仅是新值？

javascript - 如何在输入的更改事件中传递的不仅仅是新值？

问题描述

我正在使用 VueJS 从 JSON 模式动态生成一个表单，并尝试将数据发送到我的 Vuex 状态。

到目前为止，这是我的代码（简化）

<div v-for="field in schema" :key="field.fieldName">
  <div> {{ field.fieldName }} </div>
  <div v-if="field.type==='text'">
    <b-input type="text" @change="onFieldChanged" :placeholder="field.fieldName"></b-input>
  </div>
</div>

我的 onchange 方法是：

methods: {
  onFieldChanged (val) {
    // send val to the state to put it in the form object
  }
}

理想情况下，我还希望能够发送我v-for的 'sfield.fieldName以准确定义已更改的内容。有没有办法做到这一点？

我想另一种方法是使用v-model将字段及其值直接关联到 my 中的对象data，这在我输入时发生在我身上。

标签： javascriptvue.js

解决方案

该v-on指令提供了一个$event带有发出值的对象，因此您可以在模板中使用它来调用带有附加参数的事件处理程序：

<b-input type="text" @change="onFieldChanged($event, field.fieldName)" :placeholder="field.fieldName"></b-input>

和：

methods: {
  onFieldChanged (val, fieldname) {
    // send val to the state to put it in the form object
  }
}

推荐阅读