[Vuejs]-Vue js applications code throws error (Js Expected)

by

0👍

✅

I believe your error is related to the component. First, the function name is wrong. The correct name is Vue.component and it is Vue.components. Second, your component declaration is not correct.

I created this codepen where you can see how to declare the component globally and locally.

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>

Leave a comment