Looking for help with Vue.js/Vuetify - having issues with input field and removing items from list

Currently, I am busy diving deep into Vuejs and encountering a couple of challenges.

The first issue I am facing is while creating a basic todo app with CRUD functionality. When passing data through an input field, it refuses to adhere to full-width settings when CSS rules are applied.

Secondly, I have implemented a delete button that should appear when the checkbox for completing a task is checked. However, despite following Vuejs documentation and doing extensive research online, the button fails to remove the item from my list as intended.

I would greatly appreciate any assistance or guidance on resolving these issues.

<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 // <-- Used to handle errors
  }),

  methods: {
    addTask: function() {
      if (!this.addTodoInput) {
        this.hasError = true;
        return;
      }

      this.hasError = false;

      this.lists.push({
        id: this.lists.length + 1,
        text: this.addTodoInput,
        isComplete: false
      });
      this.addTodoInput = ""; 
    },
    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>

Answer №1

Although your code is correct, it's important to pay attention to variable names.

The delete button in your code calls removeTask, but in your methods it is named as removeTodo. Additionally, within the method, you are attempting to splice from data todos, which is actually named lists in your data. Furthermore, you are passing lists as an argument but then using it 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);
}

In order to resolve these issues and make everything work smoothly, you just need to update the method to remove todo as shown below:

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

WIDTH

Don't forget to set the width for v-card by updating your CSS class like this:

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

Answer №2

When it comes to styling and ensuring your input spans the full width, consider using a combination of <v-row></v-row> and <v-col></v-col>, which are integral components of the Vuetify framework structure. For instance:

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

Instead of using a div for displaying the delete section, opt for the <template> tag as using a div could impact your overall styling.

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

You have invoked the removeTask(id) function, which does not exist! You can either update it to removeTodo(list) or create a new function altogether.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to preserve the pressed/focused state when moving from one input box to the next?

While creating a form for a client, I encountered a requirement where the input box should change once clicked and retain that change even after it has been filled and the user moves to the next input box. Is there a way to achieve this using only HTML & C ...

How to position child divs at the center of a parent div

I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...

Stop scrolling on the body of the webpage

I am struggling to find a solution to completely disable scrolling on the HTML body. I have experimented with different options, but none seem to work as desired: overflow: hidden; did not disable scrolling, only hid the scrollbar. position: fixed; w ...

What is the best way to customize the appearance of Image tags located inside SVGs, whether they are in separate files or embedded within the code

I am developing a custom SVG editor application and facing an issue with implementing a highlighted effect when an <image> element is clicked. I have successfully accomplished this for other elements like <circle> by adjusting attributes such a ...

Managing field placement as the table height grows: tips and tricks

I am encountering an issue with my dynamic form. When I click on the add button, a new row is added to the table. However, once there are more than 6 rows added, the table height starts covering the fields. How can I go about setting this so that the field ...

Typescript throws an error indicating that the "this" object in Vue methods may be undefined, displaying error code TS2532

As a beginner in question writing, I apologize if my wording is not clear. The issue at hand: I am working on a Vue application with TypeScript. export default { methods: { setProgram: (program: Program)=>{ this.program = progra ...

Encountering the issue of "Cannot read properties of undefined" while attempting to pass data to a prop

Currently, I am developing a Vue application that heavily relies on charts. The issue lies in the fact that I am fetching data from the database individually for each chart component, resulting in multiple calls and a slower page load time. I am looking to ...

Adjust the background color of the dropdown when toggled

I want to add a background color to my dropdown menu when it's activated. In the demo, the dropdown content overlaps with the text behind it. Currently, I have a scrollspy feature that applies a background color to the nav bar and dropdown menu when s ...

Techniques for breaking down large CSS files into modules and combining multiple smaller CSS files

My website's CSS file is currently massive, containing site-wide selectors in a file named Mondo.css. While this setup has been effective for ensuring users only need to download the file once, I've recently developed a widget that requires its o ...

Why is it not possible for me to place my image and text side by side?

I've been working on my personal portfolio website and ran into an issue when trying to position the image with text that says Ib student. I attempted using the bootstrap box model which didn't work, followed by using float, but that also didn&ap ...

Creating a vertical scrolling marquee to showcase a list in React - step by step guide

Trying to create a marquee effect that displays a list of items in a vertical auto-scroll. After reaching the end of the list, I want it to loop back to the beginning seamlessly for continuous animation. The code snippet below shows my progress so far - a ...

Tips for toggling an Electron.js submenu within a Vue.js Component based on a particular Vuex state

I've searched everywhere for a solution to this issue. Currently, I am working on a sample vue-vuex-electron app that I have developed. My goal is to dynamically enable or disable certain submenus within the app based on the vuex state 'isLogged ...

Utilizing Javascript to extract data from a JSON file

I have a task involving importing a nested JSON file and the challenge is to extract specific data from the file and display it in a table format. Any tips on efficiently navigating through the different levels of the JSON file to access only the innermos ...

Tips for reducing a table to fit the dimensions of a mobile device

My Bootstrap table design looks great on larger screens like laptops, monitors, and tablets, but the size isn't optimized for phones. I've tried adjusting the width in percentages and pixels, but it's not working out. Any suggestions on how ...

Encountering the "Auth0 and Nuxt JS 400 ( Unable to retrieve script source )" error while trying to log in

Recently, I ventured into the world of Nuxt and encountered a 400 error page every time I tried to log in. I followed the instructions directly from the Auth/nuxt Docs with the exception of adding an ENV file. I also made sure to add my Application URIs t ...

Tips for accessing a composition function in VueJS from another composition

I've been diving into the new composition-api within VueJS and have encountered a problem that I need help with. I am seeking advice on how to effectively tackle this issue. Previously, when everything was vuex-based, dispatching an action to another ...

Select an <li> element from div1 and move it to div2 when a button is clicked

Even though I have experience with JavaScript, I am struggling to figure out a simple task. Here is the list of items I need help with: <div id="left-side"> <ul> <li><div>Item 1</div></li> <li> ...

The text-overflow property with ellipsis functionality appears to be malfunctioning in Internet Explorer when applied to input elements, yet functions

Having an issue with the MS IE (version 11) when using the text-overflow: ellipsis; property for an input field. It appears that this specific property is not working properly in this browser. If anyone has any suggestions or solutions, it would be greatl ...

HTML does not support the use of certain symbols

Currently, I am in the process of designing a homepage for my school project. However, I have run into an issue. The content that I want to be displayed on my homepage is as follows: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online ...

Using two body tags in the code of a Wordpress site can lead to malfunctioning

I've encountered a strange issue with my Wordpress sites hosted on BlueHost. There seems to be a double <head> tag appearing in the HTML code, even though there is only one. This duplicate tag is causing issues with the proper rendering of the s ...