从 Vue2 中的方法清除 v-model 输入

Question

我有一个表单，其中包含两个日期选择器和一个用于清除每个日期选择器的按钮，如下所示：

<template>

    <form>
        <div>
            <datetime id="someDate" v-model="fields.some_date"></datetime>
            <button @click.prevent="clearSomeDate()">X</button>
        </div>

        <div>
            <datetime id="anotherDate" v-model="fields.another_date"></datetime>
            <button @click.prevent="clearAnotherDate()">X</button>
        </div>
    </form>

</template>

<script>

    export default {

        data() {
            return {
                fields: {
                    some_date: null,
                    another_date: null
                },
            };
        },

        methods: {
            
            clearSomeDate() {
                this.fields.some_date = null;
            },

            clearAnotherDate() {
                this.fields.another_date = null;
            },
        },
    }

</script>

并且工作得很好，但可重用性不高。

有没有一种方法可以通过单个 clearField() 函数实现这一点并将模型作为参数或其他东西传递？我应该做我自己的自定义组件来让它工作吗？

Answer 1

您可以将字段属性名称作为参数传递

clearField(name) {
  this.fields[name] = null;
}

并用参数调用它

<button @click.prevent="clearField('some_date')">X</button>

尽管更简洁的方法是构建另一个可重用组件并将其与 v-model

绑定

<div>
  <datetime :value="value" @change="$emit('input', $event)"></datetime>
  <button @click.prevent="$emit('input', null)">X</button>
</div>

Answer 2

您可以通过直接在模板中进行赋值来完全摆脱这些方法：

<div>
    <datetime id="someDate" v-model="fields.some_date"></datetime>
    <button @click.prevent="fields.some_date = null">X</button>
</div>

这样您就可以在模型旁边直接使用清算逻辑。

如果你想让它可重用，你也可以将它提取到一个单独的组件中：

<template>
    <div>
        <datetime v-bind="$attrs" :value="value" v-on="eventHandlers"></datetime>
        <button @click.prevent="$emit('input', null)">X</button>
    </div>
</template>

<script>
export default {
  name: "datetime-with-x",
  model: { prop: "value", event: "input" },
  props: ["value"],
  inheritAttrs: false,
  computed: {
    eventHandlers() {
      return {
        ...this.$listeners,
        input: ev => this.$emit('input', ev)
      };
    }
  }
};
</script>

然后像这样在您的组件中使用它：

<template>
    <form>
        <datetime-with-x id="someDate" v-model="fields.some_date" />
        <datetime-with-x id="anotherDate" v-model="fields.another_date" />
    </form>
</template>

<script>
import DatetimeWithX from "./datetime-with-x";

export default {
  name: "your-form",
  components: { DatetimeWithX },
  data() {
    return {
      fields: {
        some_date: null,
        another_date: null
      }
    };
  }
};
</script>

从 Vue2 中的方法清除 v-model 输入

Clear v-model input from method in Vue2

javascript

vuejs2