Masquer l'entrée sur submit (VUE)

Question

Im travaillant sur une application Vue - très simple a déclaré une liste de tâches, comme l'exemple suivant. Cependant, je voudrais cacher mon champ de saisie sur submit (et par conséquent montrer seulement la sortie comme il le fait déjà), donc je peux faire une transition agréable, car un seul élément devrait être ajouté par champ de saisie.

J'espère que quelqu'un peut m'aider avec une bonne 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

sur l'étiquette input ajouter la directive v-if='showInput' pour montrer conditionnellement l'élément. Ajoutez ensuite la propriété calculée pour déterminer la condition comme suit

computed: { 
     showInput: function() { 
     return !this.taskList_mandag.length 
     } 
    },