Значение внутри ввода не получает updatet после вызова метода - PullRequest
Новая
       5

Значение внутри ввода не получает updatet после вызова метода

0 голосов
/ 11 февраля 2019

Я хотел бы создать приложение todo-List.Вот мой код: 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:"put your notes here :)))",
  task: "",
  tasks: []
};


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

Моя проблема в том, как только я добавляю v-for деталь в мой HTML-код, что мое значение не делаетполучите updatet в строку emtpy, как и должно быть.Если я закомментирую часть v-for, атрибут value получит updatet.Надеюсь, что кто-то видит здесь проблему.

1 Ответ

0 голосов
/ 11 февраля 2019

Я сделал быстрый фрагмент, используя то, что вы уже сделали, я думаю, что это соответствует вашим ожиданиям.

Просто попробуйте запустить фрагмент; D 

new Vue({
  el: '#app',
  data() {
  	return {
      placeholder:"put your notes here :)))",
      task: "",
      tasks: []
    }
  },
  methods: {
    pushAndMakePCEmpty() {
      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="makePlaceholderEmpty" 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="pushAndMakePCEmpty">Submit</button>
</div>

Сам код должен быть самоочевидным, но, чтобы указать на сделанные мной изменения:

  1. Удалено this из v-for
  2. Изменен способ сброса значения со входа с помощью интерфейса v-модели Vue путем изменения task data
...