Home » vue » Need Assistance with Vuejs/Veutify (proboblem with input field and deleting items in list)

Need Assistance with Vuejs/Veutify (proboblem with input field and deleting items in list)

Posted by: admin November 26, 2021 Leave a comment

Questions:

Im busy learning Veujs and I have two Issues.

I’m creating a simple todo app with CRUD functionality and I am passing data through an Input field and it doesn’t want to set to full width if I set any rules for it in CSS

Secondly is I have a delete button that shows when you check the checkbox as complete, but I don’t know what I am doing wrong I followed the vuejs documentation googled but the button doesn’t want to remove the item from my list

Any help would be appreciated.

<template>
  <v-card class="wrapper mx-auto">
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title c class="title">Your Todo's</v-list-item-title>
      </v-list-item-content>
      <v-spacer></v-spacer>
      <v-text-field
        prepend-inner-icon="mdi-magnify"
        label="Search"
        single-line
        clearable
        clear-icon="mdi-close-circle-outline"
      ></v-text-field>
    </v-list-item>
    <v-divider></v-divider>

    <v-container id="todoApp">
      <v-form name="todo-form" method="post" action v-on:submit.prevent="addTask">
        <v-text-field
          v-model="addTodoInput"
          v-bind:class="{error: hasError}"
          label="What are you working on?"
          solo
          @keydown.enter="create"
        >
          <v-fade-transition v-slot:append></v-fade-transition>
        </v-text-field>
      </v-form>

      <v-divider class="mb-4"></v-divider>
      <v-card class="todo-lists" v-if="lists.length">
        <v-list-item v-for="list in lists" :key="list.id">
          <v-checkbox v-model="list.isComplete" :color="list.isComplete ? 'success' : 'primary'"></v-checkbox>
          <v-list-item-action>
            <input class="input-width" type="text" v-model="list.text" />
          </v-list-item-action>

          <v-spacer></v-spacer>

          <v-scroll-x-transition>
            <div v-if="list.isComplete">
              <v-btn class="ma-2" v-on:click="removeTask(id)" tile large color="error" icon>
                <v-icon>mdi-trash-can-outline</v-icon>
              </v-btn>
            </div>
          </v-scroll-x-transition>
        </v-list-item>
      </v-card>
    </v-container>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    addTodoInput: null,
    lists: [
      { id: 1, isComplete: true, text: "go home" },
      { id: 2, isComplete: true, text: "go home" }
    ],

    hasError: false // <-- to handle errors
  }),

  methods: {
    addTask: function() {
      if (!this.addTodoInput) {
        // <--- If no value then we are setting error to `true`
        this.hasError = true;
        return;
      }

      this.hasError = false; // <--- If textbox is filled then setting error to `false`

      this.lists.push({
        id: this.lists.length + 1,
        text: this.addTodoInput,
        isComplete: false
      });
      this.addTodoInput = ""; //clear the input after successful submission
    },
    updateTask: function(e, list) {
      e.preventDefault();
      list.title = e.target.innerText;
      e.target.blur();
    },
    create() {
      console.log("create");
    },
    removeTodo: function(lists) {
      this.todos.splice(list, 1);
    }
  }
};
</script>


<style scoped>
.wrapper {
  height: 100%;
}
input.input-width {
  width: 100%;
}
</style>

Answers:

Your code is right, But you need to remember you variable names, LOL.

Your delete button is calling removeTask but in your methods it is renamed as removeTodo. In the same method you are trying to splice from data todos. But in your data, its renamed as lists. Also, you are passing lists as an argument but it is then used as list

<v-btn class="ma-2" v-on:click="removeTask(id)" tile large color="error" icon>
  <v-icon>mdi-trash-can-outline</v-icon>
</v-btn>
removeTodo: function(lists) {
  this.todos.splice(list, 1);
}

To get everything work you just need to correct the method to remove todo as below

removeTask: function(list) {
 this.lists.splice(list, 1);
}

WIDTH

You need to set width for v-card, so just update your CSS class as follows.

.wrapper {
  height: 100%;
  width: 100%;
}

###

for styling and making your input full width use <v-row></v-row> and <v-col></v-col> combination which is important part of Vuetify structure. for example:

<v-row align="center" justify="center">
  <v-col cols="12" sm="12">
    <your-input-goes-here/>
  </v-col>
<v-row>

use tag instead of div in showing delete section, using div will affect your styling.

<template v-if="list.isComplete"> ... </template>

you called removeTask(id) function which doesn’t exist !
either change it to removeTodo(list) or write new function !

      <v-scroll-x-transition>
        <template v-if="list.isComplete">
          <v-btn class="ma-2" v-on:click="removeTodo(list)" tile large color="error" icon>
            <v-icon>mdi-trash-can-outline</v-icon>
          </v-btn>
        </template >
      </v-scroll-x-transition>