1

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"}
   ]
  }
})
Improve this question
3
  • you want to clear the placeholder? 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. Commented Jan 16, 2019 at 17:45
  • please take a look to my answer Commented Jan 16, 2019 at 17:54

2 Answers 2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is just picture perfect. thank you brother. You always help me out :) Extra credits for you too. and P.S. You guys are geniuses
what went wrong with my answer ? why did you cancel to accept it?
oops,sorry about that. I guess i clicked that by mistake. My bad.
don't worry, i think there's something went wrong with it
1

You really should go through the docs at https://v2.vuejs.org/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.org/v2/guide/events.html)

Next, you will need to reference the index of the todos during rendering (https://v2.vuejs.org/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.org/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.org/v2/api/#v-model)

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

Improve this answer

1 Comment

Thank you so much. and Yes extra credits for you. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.