Creating a task management application using AXIOS and VUE for easy data manipulation

Question

Creating a task management application using AXIOS and VUE for easy data manipulation

I am currently working on a small app to enhance my skills in VUE and Axios. However, I am facing a roadblock when it comes to the update functionality. I am struggling to pass the ID to the form for updating and despite watching numerous tutorial videos, I still can't seem to grasp it. The delete feature is functioning correctly, and the create function works flawlessly. As a coding newbie, I've tried seeking help through various videos and decided to turn to this platform for assistance. I apologize in advance if my question seems too basic.

 <!-- The code snippet with VUE and Axios implementation -->

javascript css vue.js axios

Answer 1

Answer №1

I have successfully implemented the same page using Vue. Thank you for your assistance.

<template>
  <div id="content">  
  <h1>...</h1>  
    <div>
      <label>Product Name</label> : <input type="text" id="txt1" v-model="model.productName"  />
    </div>
    <div>
      <label>Description</label> : <input type="text" id="txt2" v-model="model.description" />
    </div>
       
    <div>
      <button type="button" v-on:click="saveClick">Save</button>
    </div>
  </div>
  <hr />
  <hr />
  <h1>...</h1>
  <table border="1" style="margin:auto">
    <thead>
      <tr>
        <th style="width: 100px">ID</th>
        <th style="width: 100px">Product Name</th>
        <th style="width: 100px">Description</th>       
        <th style="width: 100px"></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in model.list" v-bind:key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.productName }}</td>
        <td>{{ item.description }}</td>      
        <td><button type="button" v-on:click="deleteClick(item.id)">Delete</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import axios from "axios";

export default {
  name: "Product",
  data: function () {
    return {
      model: {
        productName: "",
        description: "",
        
      },
      list: [],
    };
  },
  methods: {
    saveClick() {      
      axios
        .post("http://example.com", this.model)
        .then((resp) => {
          this.getList();
          alert("success" + resp.data.id);
        });
    },
    getList() {
      axios.get("http://example.com").then((resp) => {
        this.model.list = resp.data;        
      });
    },
    deleteClick(id) {
      axios.delete("http://example.com" + id).then(() => {
         this.getList();
         alert("success");  
      });
    }
  },  
  mounted: function () {
    this.getList();
  },
};
</script>

Answer 2

I have successfully implemented the same page using Vue. Thank you for your assistance.

<template>
  <div id="content">  
  <h1>...</h1>  
    <div>
      <label>Product Name</label> : <input type="text" id="txt1" v-model="model.productName"  />
    </div>
    <div>
      <label>Description</label> : <input type="text" id="txt2" v-model="model.description" />
    </div>
       
    <div>
      <button type="button" v-on:click="saveClick">Save</button>
    </div>
  </div>
  <hr />
  <hr />
  <h1>...</h1>
  <table border="1" style="margin:auto">
    <thead>
      <tr>
        <th style="width: 100px">ID</th>
        <th style="width: 100px">Product Name</th>
        <th style="width: 100px">Description</th>       
        <th style="width: 100px"></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in model.list" v-bind:key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.productName }}</td>
        <td>{{ item.description }}</td>      
        <td><button type="button" v-on:click="deleteClick(item.id)">Delete</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import axios from "axios";

export default {
  name: "Product",
  data: function () {
    return {
      model: {
        productName: "",
        description: "",
        
      },
      list: [],
    };
  },
  methods: {
    saveClick() {      
      axios
        .post("http://example.com", this.model)
        .then((resp) => {
          this.getList();
          alert("success" + resp.data.id);
        });
    },
    getList() {
      axios.get("http://example.com").then((resp) => {
        this.model.list = resp.data;        
      });
    },
    deleteClick(id) {
      axios.delete("http://example.com" + id).then(() => {
         this.getList();
         alert("success");  
      });
    }
  },  
  mounted: function () {
    this.getList();
  },
};
</script>

Answer 3

Answer №2

Make sure to review your template and script for potential improvements:
 1. The getCurrentTask() method only assigns the id. Consider enhancing this functionality.
 2. Update the template code as follows:

    `<button class="btn btn-warning" @click="edit=true;getCurrentTask(task);">`

 3. Modify the getCurrentTask(task) method in script:

    this.currentTask = task.id;
    this.form.name = task.name;
    this.form.description = task.description;

 4. Consider restructuring the data model by consolidating currentTask and form objects into a single object:

   
{
      tasks: [],
      form: { name: "", description: "", id: "" },
      route: "/api/tasks/",
      edit: false,
    }

Answer 4

Make sure to review your template and script for potential improvements:
 1. The getCurrentTask() method only assigns the id. Consider enhancing this functionality.
 2. Update the template code as follows:

    `<button class="btn btn-warning" @click="edit=true;getCurrentTask(task);">`

 3. Modify the getCurrentTask(task) method in script:

    this.currentTask = task.id;
    this.form.name = task.name;
    this.form.description = task.description;

 4. Consider restructuring the data model by consolidating currentTask and form objects into a single object:

   
{
      tasks: [],
      form: { name: "", description: "", id: "" },
      route: "/api/tasks/",
      edit: false,
    }

Creating a task management application using AXIOS and VUE for easy data manipulation

Answer №1

Answer №2

Similar questions

The content has been successfully loaded using ajax, but it is not displaying

Tips for successfully retrieving a boolean value from an ASP.Net JavaScript AJAX request using a C# method

A guide to calculating sums within a v-for loop in Vue.js

Using the linearGradient feature within an SVG to create a transitional effect on the Fill property

Accessing Data from Nested PHP Array in Javascript

In Angular 15, CSS override configurations do not function as intended

What is the best way to retrieve a value from $http or $resource using this filter?

I'm puzzled about what could be behind this error message Error [ERR_HTTP_HEADERS_SENT], especially since I've only sent the response header once. How can I figure out the cause

Encountering: ERR_SSL_PROTOCOL_ERROR nginx with vue.js

having trouble retrieving 200 status code from Angular server response

Incorporating an external library into a Node.js virtual machine

Ways to modify the attribute of an element in an ImmutableList({}) nested within Immutable.Map({})

What is the best way to create a grid layout that is responsive using HTML and CSS

What could be causing my jQuery script to not load properly on the first attempt?

Simultaneously activate the top and bottom stacked components by clicking on them

What is the best way to start the server when the files are located in separate directories?

The nodejs application seems to be encountering an issue as the /public/index.html file is not displaying on the

In which location are HTML files stored within WordPress plugins?

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Switching between vertical and horizontal div layouts while reorganizing text fields within the top div