How to write, update local JSON file in vue js

Question

I have tried to use file system (fs module) but, not getting that how to use that FS module. could anyone explain with proper example.

I was doing an example in vue js.

• Create component
• Added json file
• Pass records as props on component
• listen that props on another component
• and render student list and perform remove record

Now next i want to Pass updated list using emit & update the JSON as well

This code is working properly just i want to update local json file after delete record.

StudentRegistration.vue

<template>
    <div class="container">
        <div class="row"> 
            <template v-if="students.length">
                <!-- {{student.length}} -->
                <studentCard class="student__parent" v-for="student in students" :key="student.id" :student="student" @studentRemoveId="studentRemoveId"/>
            </template>
            <template v-else>
                <div class="not__available">
                    Data not available
                </div>
            </template>
        </div>
    </div>
</template>

<script>

import studentCard from './studentCard.vue'
import studentData from '../data/StudentData.json'


export default {
    name: 'StudentRegi',
    components:{
        studentCard
    },
    data() {
        return {
            students: studentData,
            
        }
    },
    methods: {
        studentRemoveId(studid){
            this.students = this.students.filter( item => {
                console.log('hey there ::=> ', item);
                return item.id !== studid.id
            });            

        }
    },
    
}
</script>

studentCard.vue

<template>
    <div>
        <span class="student__remove" @click="removeStudent(student)">X</span>
        <div class="student__inner">
            <div class="student__image">
                <img :src="student.avatar" alt="">
            </div>
            <div class="student__name student-detail">
                <div>Name</div>
                <div>{{student.fname}} {{student.lname}}</div>
            </div>
            <div class="student__age student-detail">
                <div>Age</div>
                <div>{{student.age}}</div>
            </div>
            <div class="studet_email student-detail">
                <div>Email</div>
                <div>{{student.email}}</div>
            </div>
            <div class="student__phone student-detail">
                <div>Phone</div>
                <div>{{student.phone}}</div>
            </div>
        </div> 
        
    </div>
</template>

<script>

export default {
    name:'StudentCard',
    props:['student'],
    methods: {
        removeStudent(studid){
            this.$emit('studentRemoveId', studid);
        }

    },

}
</script>

data.json

[
    {
        "id": 1,
        "fname": "Atul",
        "lname": "Bhavsar",
        "age": "10 Years",
        "email": "[email protected]",
        "phone": "9685958698",
        "avatar": "https://i.postimg.cc/d3ykpLs8/stud1.jpg"
    },
    {
        "id": 7,
        "fname": "Foram",
        "lname": "Dobariya",
        "age": "20 Years",
        "email": "[email protected]",
        "phone": "9856985698",
        "avatar": "https://i.postimg.cc/QtWp5XBn/stud7.jpg"
    },
]

Answer 1

Hey After some searches I found a solution so sharing here it may help who stuck related to this issue,

As i show above code i just wanted to add code where i can write my json file. so i have made some changes in code, that is as below.

Add command in CMD : json-server --watch './src/data/studentData.json' --port 3001

then it will provide local link from where you can open you json data Resources http://localhost:3001/studente

see below image :

StudentRegistration.vue

this code should be in script tag in StudentRegistration.vue component

In this file added below code added code in method and created create method

export default {
    name: 'StudentRegi',
    components:{
        studentCard
    },
    data() {
        return {
            studentsGetData: []
            // studentsGetData: studentData,
        }
    },
    methods: {
        studentRemoveId(studid){

            fetch(`http://localhost:3001/studente/${studid.id}`, 
            {
                method: 'DELETE', 
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                console.log('res ::=> ', resp.data);
                resp.data;
            }).catch(error => {
                console.log(error);
            });
                
           
            this.studentsGetData = this.studentsGetData.filter( item => {
                return item.id !== studid.id
            });            
            
        }
    },
    async created(){
        await fetch('http://localhost:3001/studente')
        .then(res => res.json())
        .then(data => { 
            console.log('data ::=> ', data);
            this.studentsGetData = data
        } )
        .catch(err => console.log(err.message))
    }
}

Now Run your project