隐藏提交时的输入（VUE）

Question

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
      }
    },