Question

当我单击“添加任务”按钮时，我希望文本字段为空。我该如何实现？

<controls:AccordionView Date="{Binding Source={x:Reference TheDate}, Path=Date}" ...>

<template>
  <div class="col-md-6" >
    <div class="card bg-light mt-4">
      <div class="card-header">Task Form</div>

        <div class="card-body">
          <form action="./api/word" method="post" @submit.prevent="addTask()">

            <div class="form-group">
              <input type="text" name="title" v-model="title" placeholder="Local word" class="form-control">
            </div>
            <div class="form-group">
              <input type="text" name="second_title" v-model="second_title" placeholder="Foreign word" class="form-control">
            </div>
            <div class="form-group">
              <input type="submit" value="Add Task" class="btn btn-info">
            </div>
          </form>
        </div>

      </div>
  </div>
</template>

Answer 1

这非常简单，只需在addTask（）中添加事件作为参数，然后在函数的末尾编写：event.target.reset();

代码：

<template>
  <div class="col-md-6" >
    <div class="card bg-light mt-4">
      <div class="card-header">Task Form</div>

        <div class="card-body">
          <form action="./api/word" method="post" @submit.prevent="addTask">

            <div class="form-group">
              <input type="text" name="title" v-model="title" placeholder="Local word" class="form-control">
            </div>
            <div class="form-group">
              <input type="text" name="second_title" v-model="second_title" placeholder="Foreign word" class="form-control">
            </div>
            <div class="form-group">
              <input type="submit" value="Add Task" class="btn btn-info">
            </div>
          </form>
        </div>

      </div>
  </div>
</template>

在那里：

export default {
  data() {
    return {
      title: '',
      second_title: ''
    }

  },
  mounted() {
    console.log('Component mounted.')
  },
  methods: {

    addTask(event) {
      Event.$emit('taskCreated', {
        title: this.title,
        second_title: this.second_title
      });
      axios.post('./api/word', {
        title: this.title,
        second_title: this.second_title,

      })
      this.title = '';
      this.second_title = '';

      event.target.reset();
    }

希望它对您有用；）

重置点击，提示时的输入

1 个答案: