Vue JS应用程序抛出预期的JS错误

Question

我在Visual Studio 2017中创建了Vue js。我希望这将与回送API交互。当我运行应用程序时，我想使用回送API进行CRUD操作。但是我在这行中遇到错误

让catApp = new Vue（{//期望的js

我已经导入了必要的类，例如从'vue'中导入Vue。

这是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>

Answer 1

您的new Vue分配位于您的export default区块内。将您的作业移出。您是否忘了用}将其关闭？

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

// THIS IS INSIDE THE export default block...
let catApp = new Vue({