toneee
2 years ago
9
0
Vue

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() {
       this.getTasks();
    },

    methods: {
        getTasks() {
            axios.get('/api/tasks')
                .then(response => {
                    this.tasks = response.data;
                });
        },

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


        create() {
            Spark.post('/api/task', this.form)
                .then(task => {
                    this.tasks.push(task);

                    this.form.name = '';
                });
        },


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

            this.tasks = _.reject(this.tasks, t => t.id == task.id);
        }
    }


});


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