Carsten Andersen Carsten Andersen - 3 years ago 355
Javascript Question

Hide input on submit (VUE)

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!

new Vue({
el: "#madplan",
data: {
newTask_mandag: "",
taskList_mandag: [],

methods: {
addTask_mandag: function() {
var task = this.newTask_mandag.trim();
if (task) {
text: task
this.newTask_mandag = "";

removeSubTask_mandag: function(task) {
var index = this.taskList_mandag.indexOf(task);
this.taskList_mandag.splice(index, 1);

<script src=""></script>
<script src=""></script>

<div id="madplan">
<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">

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


Answer Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download