Question

我正在项目中使用Vuetify并创建就地编辑体验。在span和text字段之间切换是可行的，并且可以正确地将更新发送到我的服务器。尽管最后一件事是我必须先确定输入的原始值是否已从新值更改，以便在不需要此功能之前将其更改为完整，然后才能将其称为完整功能。

<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

模糊事件通常从附加的元素返回事件。但是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);
    },
  }
})

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

1 个答案: