单击时重置输入，vue答案

【问题标题】：Reset input on click, vue单击时重置输入，vue
【发布时间】：2019-01-15 09:50:44
【问题描述】：

当我单击“添加任务”按钮时，我希望我的文本字段为空。我怎样才能做到这一点？

<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.$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 = '';


    }

【问题讨论】：

标签： laravel vue.js

【解决方案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();
    }

希望它对你有用； )

【讨论】：