2 years ago

CRUD Application with Seperate page for Update

Posted 2 years ago by toneee

Hi All,

I am writing an simple CRUD application and I am stuck on the Update part.

Basically I want to redirect a user to an edit page, but I am not sure how to load the data from the API. I have some javascript to load all the records on the list page which is called on the mounted() function. I am not sure how to load a single record as the mounted function already has an action. Should I split it into seperate javascript? I can get it to work if I load it via a modal window on a button click, which can call the single record function directly.

Here is my current javascript.

Vue.component('task', {
    props: ['user'],

    // el: '#test',

    data() {
        return {
            tasks: [],

            form: new SparkForm({
                name: ''

    mounted() {

    methods: {
        getTasks() {
                .then(response => {
                    this.tasks =;

        getTask() {
            axios.get('/api/task/' +
                .then(response => {
                    this.tasks =;

        create() {
  '/api/task', this.form)
                .then(task => {

           = '';

        delete(task) {
            axios.delete('/api/task/' +;

            this.tasks = _.reject(this.tasks, t => ==;


Please sign in or create an account to participate in this conversation.