Learn, Share, Build

262
October 03, 2017, at 06:35 AM

Im working on a Vue app - very simple said a todo list, like the following example. However i would like to hide my input field on submit (and hereby only show the output as it already does), so i can make a nice transition, since only one item should be added per input field.

Hope someone can help me with a good solution!

https://jsfiddle.net/541rd96r/

new Vue({ 
  el: "#madplan", 
  data: { 
    newTask_mandag: "", 
    taskList_mandag: [], 
  }, 
 
  methods: { 
    addTask_mandag: function() { 
      var task = this.newTask_mandag.trim(); 
      if (task) { 
        this.taskList_mandag.push({ 
          text: task 
        }); 
        this.newTask_mandag = ""; 
      } 
    }, 
 
    removeSubTask_mandag: function(task) { 
      var index = this.taskList_mandag.indexOf(task); 
      this.taskList_mandag.splice(index, 1); 
    }, 
  } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="madplan"> 
  <section> 
    <section class="prefetch" class="panel"> 
      <input class="input typeahead" type="text" placeholder="Tilføj ret til madplanen" v-model="newTask_mandag " v-on:keyup.enter="addTask_mandag"> 
    </section> 
 
    <details v-for="task in taskList_mandag" v-bind:key="task.text" class="sub-list-item"> 
      <summary>{{ task.text }} <button v-on:click="removeSubTask_mandag(task)">X</button></summary> 
 
    </details> 
  </section> 
</div>

Answer 1

on the input tag add the directive v-if='showInput' to show the element conditionally. Then add the computed property to determine the condition like so

   computed: {
        showInput: function() {
        return !this.taskList_mandag.length
      }
    },
Rent Charter Buses Company
READ ALSO
Learn, Share, Build

Learn, Share, Build

I am attempting to delete everything that is wrapped within a class div 'panel-default' and everything associated to the IDsI was able to delete it without modal popup but now the modal is added, it is not doing what I wanted it to do

249
Learn, Share, Build

Learn, Share, Build

I have a data entry screen where the user can type values and use the + key to advance to the next fieldAt the last field, the user can either press + or enter

228
Learn, Share, Build

Learn, Share, Build

I have the following code which scrolls to the bottom of an element (DIV) and it works

262
Learn, Share, Build

Learn, Share, Build

This question already has an answer here:

226