Vue Js 应用程序抛出 Js 预期错误答案

【问题标题】：Vue Js Applications throws Js Expected ErrorsVue Js 应用程序抛出 Js 预期错误
【发布时间】：2019-07-11 01:19:49
【问题描述】：

我正在学习 Vue js 和 Visual Studio 2017 。我正在尝试使用几个按钮构建应用程序。我想在单击特定按钮时显示消息。但是当我编译这段代码时，我得到了以下错误。

严重性代码描述项目文件行抑制状态警告 TS1005 (JS) ':' 预期。 VuejsApp JavaScript 内容文件 C:\Users\Khundokar Nirjor\Documents\Visual Studio 2017\Projects\VuejsApp\VuejsApp\src\App.vue 21 Active

这是我的App.vue 代码：

<template>
    <div id="databinding">
        <div id="counter-event-example">
            <p style="font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
            <button-counter v-for="(item, index) in languages"
                            v-bind:item="item"
                            v-bind:index="index"
                            v-on:showlanguage="languagedisp"></button-counter>
        </div>
    </div>
</template>

<script>

    import Vue from 'vue';
    export default {
        name: 'app',
        components: {

        },
        Vue.component('button-counter', {// error on this line

            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
                return {
                    counter: 0
                }
            },
            props: ['item'],
            methods: {
                displayLanguage: function (lng) {
                    console.log(lng);
                    this.$emit('showlanguage', lng);
                }
            },
        })


      var vm= new Vue({// error on this line
            el: '#databinding',
            data: {
                languageclicked: "",
                languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
                languagedisp: function (a) {
                    this.languageclicked = a;
                }
            }
        })



    }

</script>

<style>
</style>

【问题讨论】：

看起来你的代码在一个对象内
你能解释一下你的看法吗？
就像：{ var a = 1 } 它是一个对象内部的语句。对象应该是{ key: value }
button-counter 组件应位于其正上方的components: { }, 内
vm部分应该在对象之外

标签： javascript visual-studio vue.js

【解决方案1】：

这里的问题是因为代码在对象内部。如果您将button-counter 组件移动到其正上方的components: { } 中，和对象外的 vm 部分，应该可以解决这个问题。

【讨论】：