Vue/Vuetify @change 不提供完整的 $event 对象

Question

我在一个项目中使用 Vuetify 并创建了就地编辑体验。在跨度和文本字段之间切换有效，并且它正确地将更新发送到我的服务器。不过，在我可以将此功能称为完成之前的最后一件事是，我需要确定输入的原始值是否已从新值更改，以便在不需要时不会发布到我的服务器。

<span
  v-if="editableCategory !== `category${category.id}Ref`"
  class="category-header"
  @click="setCategoryEditing(`category${category.id}Ref`)">
  <h4>{{ category.name }}</h4>
  <v-icon small>
    edit
  </v-icon>
</span>

<v-text-field
  v-else
  :ref="`category${category.id}Ref`"
  :value="category.name"
  color="primary"
  dense
  hide-details
  type="text"
  outlined
  @blur="updateCategory(category, $event)"
  @change="updateCategory(category, $event)" />

问题是，当我在控制台记录$event 时，在测试@change 和@blur 时会得到两个不同的响应。 @blur 似乎给了我正常的、完整的事件对象，然后我就能够正确地比较新旧值。然而，@change 事件只是给了我一个新值的字符串。

这是 Vuetify v-text-field @change 事件未正确触发的问题（因此我应该与他们创建一个 Github 问题？），还是我完全误解了模糊/更改事件（也是另一个非常真实的事件可能性）？

Answer 1

Blur 事件通常从附加的元素返回事件。但是 change 事件从输入元素返回更新后的值

但您仍然可以使用以下方法从模糊事件中读取更新的值

在这里工作 codepen，检查控制台的预期输出：https://codepen.io/chansv/pen/JjjaZOJ?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="12" sm="6" md="3">
            <v-text-field
              label="Outlined"
              placeholder="Placeholder"
              outlined
              @change="updateCategory($event, category)"
              @blur="updateCategory($event.target.value, category)"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    category: 'category text',
  },
  methods: {
    updateCategory(event, category) {
      console.log(event, category);
    },
  }
})