Очистка текстовых полей На кнопку Нажмите в Vue Js?

Вы действительно должны просмотреть документы на https://vuejs.org/v2/

Вам не хватает многих основных конструкторов для достижения вашей цели. Во-первых, вам нужно добавить событие нажатия на кнопку. ( https://vuejs.org/v2/guide/events.html )

Далее вам нужно будет сослаться на индекс задач во время рендеринга ( https: / /vuejs.org/v2/guide/list.html)

Здесь вы можете создать простой метод с именем clear:

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", text1:"Hey" },
      { text: "Learn Vue", text1:"Hello"  },
      { text: "Play around in JSFiddle", text1:"Ciao"  },
      { text: "Build something awesome", text1:"Something"}
    ]
  },
  methods: {
    clear (index) {
      // Allows for unlimited keys
      for (let key in this.todos[index]) {
        this.$set(this.todos[index], key, null);
      }
    }
  }
})

Обратите внимание, что в методе clear я обеспечение реактивности с помощью метода $ set ( https://vuejs.org/v2/api/#vm-set ) и ссылки на индекс, который был передан.

Наконец, я привязал входные значения к модели todo, используя v-модель Vue, могу ли я получить дополнительный кредит? ( https://vuejs.org/v2/api/#v-model )

Завершенный код: https://jsfiddle.net/cdsgu62L/10/ [116 ]

Если вы хотите очистить определенные поля, вы можете добавить метод clear, который принимает индекс в качестве параметра, но перед этим вы должны добавить элементы value и value1 к каждому todo и привязать их к полям как следует:

new Vue({
  el: "#app",
  data: {
    todos: [{
        text: "Learn JavaScript",
        text1: "Hey",
        value1:'',
        value:''
          
      },
      {
        text: "Learn Vue",
        text1: "Hello",
        value1:'',
        value:''
      },
      {
        text: "Play around in JSFiddle",
        text1: "Ciao",
        value1:'',
        value:''
      },
      {
        text: "Build something awesome",
        text1: "Something",
        value1:'',
        value:''
      }
    ]
  },
  methods:{
       clear(i){
       this.todos[i].value='';
        this.todos[i].value1='';
       }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <h2>Each text with it's own state and clear should clear the respective text fields</h2>
  <ul v-for="(todo,i) in todos">
    <li>
      <input type="text" :placeholder="`${todo.text}`" v-model="todo.value">
    </li>
    <li>
      <input type="text" :placeholder="`${todo.text1}`"  v-model="todo.value1">
    </li>
    <button @click="clear(i)">Clear</button>
  </ul>
</div>