The input value fails to update after the method is called

Question

The input value fails to update after the method is called

I am working on developing a todo-list application and here is the code I have so far: HTML:

<div class="divPadder">
  <input ref="makePlaceholderEmpty" class="inputBoxSize" type="text" :placeholder="placeholder"v-model="task">
  <ul>
    <li v-for="(item,index) in this.tasks" :key="index">{{item}}</li>
  </ul>
</div>
<button class="button" v-on:click="pushAndMakePCEmpty">Submit</button>

Script:

data() {
return {
  placeholder:"Please enter your notes here :)",
  task: "",
  tasks: []
};


},
  methods: {
    pushAndMakePCEmpty() {
      this.$refs.makePlaceholderEmpty.value = "";
      this.tasks.push(this.task);
    }
  }

I am facing an issue where the value does not get updated to an empty string when I include the v-for part in my HTML code. However, if I comment out the v-for part, the value attribute gets updated as expected. I hope someone can help me identify and resolve this problem.

javascript vue.js v-for

Answer 1

Answer №1

I've put together a snippet based on your existing code, and I think it meets your expectations.

Feel free to give the snippet a test run ;D

new Vue({
  el: '#app',
  data() {
  return {
      placeholder:"write your notes here :)))",
      task: "",
      tasks: []
    }
  },
  methods: {
    pushAndClearTask() {
      this.tasks.push(this.task);
      this.task = "";
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="divPadder">
  <input ref="clearPlaceholder" class="inputBoxSize" type="text" :placeholder="placeholder" v-model="task">
  <ul>
    <li v-for="(item,index) in tasks" :key="index">{{item}}</li>
  </ul>
</div>
<button class="button" v-on:click="pushAndClearTask">Submit</button>
</div>

The code should be straightforward to follow, but I've made a couple of changes:

Removed the this from the v-for directive
Updated the way the input value is cleared using Vue's v-model by modifying the task data property

Answer 2

I've put together a snippet based on your existing code, and I think it meets your expectations.

Feel free to give the snippet a test run ;D

new Vue({
  el: '#app',
  data() {
  return {
      placeholder:"write your notes here :)))",
      task: "",
      tasks: []
    }
  },
  methods: {
    pushAndClearTask() {
      this.tasks.push(this.task);
      this.task = "";
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="divPadder">
  <input ref="clearPlaceholder" class="inputBoxSize" type="text" :placeholder="placeholder" v-model="task">
  <ul>
    <li v-for="(item,index) in tasks" :key="index">{{item}}</li>
  </ul>
</div>
<button class="button" v-on:click="pushAndClearTask">Submit</button>
</div>

The code should be straightforward to follow, but I've made a couple of changes:

Removed the this from the v-for directive
Updated the way the input value is cleared using Vue's v-model by modifying the task data property

The input value fails to update after the method is called

Answer №1

Similar questions

Execute action based on local state when component is unmounted in React

Tips for sharing the scope using module.exports

Tips for incorporating an outside model into vue.js with babylon js

Unable to figure out a method to properly synchronize a vue.js asynchronous function

A guide on transferring a Vue component to a custom local library

When you try to click outside of react-select, the dropdown doesn't

Is there a way to have multiple app.post functions for the same route using express()?

How can I retrieve the elements that have been removed using $pull in mongoose?

What is the appropriate HTTP status code for "item not found" when using RESTful ajax?

Transforming PHP Variable Using Ajax

Creating a Breeze js entity using a JSON string and importing it into the breeze cache: A step-by-step guide

Converting MSK time to SST time using JavaScript: A Handy Guide

Disable Dates in Material UI Date Textfield

Is there a way to incorporate a loading feature into the Vuetify datepicker?

Use jquery to rotate the div and animate it to move upwards

When my webpage is opened in Firefox, I notice that it automatically scrolls down upon loading

How to showcase images and text from an array of objects using React

Exploring the seamless integration of Material UI slider with chart js

Vue.js: The chart's dataset has been refreshed

Limit search to retrieve specific items based on pointer in JavaScript using Parse.com