I have a layout on which i am looping to get text fields and a button. How do i add a function on the button so that it clears only it's respective fields. Check out the fiddle here.

<div id="app">
  <h2>Each text with it's own state and clear should clear the respective 
 text fields</h2>
  <ul v-for="todo in todos">
  <li>
  <input type="text" :placeholder="`${todo.text}`">
  </li>
  <li>
  <input type="text" :placeholder="`${todo.text1}`">
  </li>
  <button>Clear</button>
  </ul>

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"}
   ]
  }
})

I have a layout on which i am looping to get text fields and a button. How do i add a function on the button so that it clears only it's respective fields. Check out the fiddle here.

<div id="app">
  <h2>Each text with it's own state and clear should clear the respective 
 text fields</h2>
  <ul v-for="todo in todos">
  <li>
  <input type="text" :placeholder="`${todo.text}`">
  </li>
  <li>
  <input type="text" :placeholder="`${todo.text1}`">
  </li>
  <button>Clear</button>
  </ul>

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"}
   ]
  }
})

• javascript
• vue.js
• vuejs2
• vue-ponent
• nuxt.js

Share Improve this question Follow edited Jul 17, 2020 at 17:05 Boussadjra Brahim 1 asked Jan 16, 2019 at 17:08 user9996891user9996891 3

• you want to clear the placeholder? – Boussadjra Brahim Commented Jan 16, 2019 at 17:34
• Not the placeholder, but let's say you should be able to type in field1 where the current place holder is "Learn JavaScript" and then field2 where the placeholder is "Hey" and then on click, those two fields get cleared out. – user9996891 Commented Jan 16, 2019 at 17:45
• please take a look to my answer – Boussadjra Brahim Commented Jan 16, 2019 at 17:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

If you want to clear a specific fields you could add a method clear which takes the index as parameter but before that you should add value and value1 items to each todo and bind them to fields as follows:

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/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>

You really should go through the docs at https://v2.vuejs/v2/

You are missing many of the basic constructors to achieve your objective. First, you will need to add the click event to your button. (https://v2.vuejs/v2/guide/events.html)

Next, you will need to reference the index of the todos during rendering (https://v2.vuejs/v2/guide/list.html)

From here you can create a simple method called 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);
      }
    }
  }
})

Notice that in the clear method I am ensuring reactivity by using the $set method (https://v2.vuejs/v2/api/#vm-set) and referencing the index that was passed.

Lastly, I bound the inputs value to the todo model using Vue's v-model, do I get extra credit? (https://v2.vuejs/v2/api/#v-model)

Completed code: https://jsfiddle/cdsgu62L/10/