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

模糊事件通常返回来自附加元素的事件。但是更改事件从输入元素返回更新后的值

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

在这里使用 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);
    },
  }
})