0

I created vue js in visual studio 2017 . I want this this will be interacting with loopback API .When I run the applications , I want to do CRUD operations with loopback API. But I am getting errors in this line

let catApp = new Vue({ // js expected

I already imported necessary classes for example import Vue from 'vue'.

Here is the code for APP.vue .

<template>
    <div id="catApp" v-cloak>

        <h1>Cats</h1>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Gender</th>
                    <th>Breed</th>
                    <td>&nbsp;</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="cat in cats">
                    <td @click="editCat(cat)" class="catItem" title="Click to Edit">{{cat.name}}</td>
                    <td>{{cat.age}}</td>
                    <td>{{cat.gender}}</td>
                    <td>{{cat.breed}}</td>
                    <td @click="deleteCat(cat)" class="deleteCat" title="Click to Delete">Delete</td>
                </tr>
            </tbody>
        </table>

        <form @submit.prevent="storeCat">
            <p>
                <label for="name">Name</label>
                <input type="text" id="name" v-model="cat.name">
            </p>
            <p>
                <label for="age">Age</label>
                <input type="number" id="age" v-model="cat.age">
            </p>
            <p>
                <label for="breed">Breed</label>
                <input type="text" id="breed" v-model="cat.breed">
            </p>
            <p>
                <label for="gender">Gender</label>
                <input type="text" id="gender" v-model="cat.gender">
            </p>
            <input type="reset" value="Clear" @click="reset">
            <input type="submit" value="Save Cat 🐱">
        </form>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script src="js/app.js"></script>
</template>

<script>
    import Vue from 'vue';
    import Home from './components/Home.vue';
    const API = 'http://localhost:3000/api/cats/';
    export default {
        name: 'app',
        components: {
            Home
        }


let catApp = new Vue({
    el:'#catApp',
    data:{
        cats:[],
        cat:{
            id:'',
            name:'',
            age:'',
            gender:'',
            breed:''
        }
    },
    created:function() {
        this.getCats();
    },
    methods:{
        getCats:function() {
            fetch(API)
            .then(res => res.json())
            .then(res => this.cats = res);  
        },
        storeCat:function() {
            let method;
            console.log('storeCat', this.cat);
            // Handle new vs old
            if(this.cat.id === '') {
                delete this.cat.id;
                method = 'POST';
            } else {
                method = 'PUT';
            }
            fetch(API, {
                headers:{
                    'Content-Type':'application/json'
                },
                method:method,
                body:JSON.stringify(this.cat)
            })
            .then(res => res.json())
            .then(res => {
                this.getCats();
                this.reset();
            });
        },
        deleteCat:function(c) {
            fetch(API + c.id, {
                headers:{
                    'Content-Type':'application/json'
                },
                method:'DELETE'
            })
            .then(res => res.json())
            .then(res => {
                this.getCats();
            });

            // call reset cuz the cat could be 'active'
            this.reset();
        },
        editCat:function(c) {
            /*
            This line was bad as it made a reference, and as you typed, it updated
            the list. A user may think they don't need to click save.
            this.cat = c;
            */
            this.cat.id = c.id;
            this.cat.name = c.name;
            this.cat.age = c.age;
            this.cat.breed = c.breed;
            this.cat.gender = c.gender;
        },
        reset:function() {
            this.cat.id = '';
            this.cat.name = '';
            this.cat.age = '';
            this.cat.breed = '';
            this.cat.gender = '';
        }
    }
});

    };
</script>

<style>
</style>
Improve this question
1
  • I thought <script src="https://unpkg.com/vue"></script> <script src="js/app.js"></script> should be put under </template> Commented Jul 16, 2019 at 2:55

1 Answer 1

Reset to default
0

Your new Vue assignment is inside of your export default block. Move your assignment out of it. Did you forget to close it with a }?

export default {
        name: 'app',
        components: {
            Home
        }

// THIS IS INSIDE THE export default block...
let catApp = new Vue({
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments