Vue js 应用程序代码抛出错误（Js 预期）答案

【问题标题】：Vue js applications code throws error (Js Expected)Vue js 应用程序代码抛出错误（Js 预期）
【发布时间】：2019-07-11 00:09:21
【问题描述】：

我正在尝试构建 vue js 应用程序，但出现以下错误。

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

这是 Home.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 Home from './components/Home.vue';
  //  import component1 from './components/component1.vue';

    export default {
        name: 'app',
        Vue.components('button-counter', {
            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);
                }
            },
        });
         new Vue({
            el: '#databinding',
            data: {
                languageclicked: "",
                languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
                languagedisp: function (a) {
                    this.languageclicked = a;
                }
            }
        })
    };


</script>

<style>
</style>

我想显示按钮列表，当我点击其中任何一个按钮时，我想显示按钮被点击的消息。

【问题讨论】：

标签： visual-studio vue.js

【解决方案1】：

我相信您的错误与组件有关。首先，函数名错误。正确的名称是Vue.component，它是Vue.components。其次，您的组件声明不正确。

我创建了this codepen，您可以在其中看到如何在全局和本地声明组件。

const buttonCounter = {
	template:
		`<button @click="displayLanguage(item)">
			<span style="font-size:25px;">{{ item }}</span>
		</button>`,
	props: ["item"],
	methods: {
		displayLanguage: function(lng) {
			this.$emit("show-language", lng);
		}
	}
}


// Declare your component globally, will be able to access it in any another component in the application
Vue.component("button-counter", buttonCounter );

new Vue({
	el: "#databinding",
  // declarete your component locally, it only will be available inside this context
	components:{
		'button-counter-2' : buttonCounter
	},
	data: function() {
		return {
			languageclicked: "",
			languages: ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
		};
	},
	methods: {
		languageDisp: function(a) {
			this.languageclicked = a;
		}
	}
});

body {
	margin: 20px;
}

.btn-wrapper {
		display: flex;
		margin-bottom: 20px;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="databinding">
	<div id="counter-event-example">
		<p style="font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
		<div class="btn-wrapper">
			<button-counter v-for="(item, index) in languages" :item="item"  :key="item" @show-language="languageDisp"/>
		</div>
		<button-counter-2 v-for="(item, index) in languages" :item="item" :key="item"  @show-language="languageDisp"/>
	</div>
</div>

【讨论】：