0

I am learning Vue js with Visual Studio 2017 . I am trying to build up applications with several buttons . I want to display the message when the specific buttons it clicked . but when i complied this code ,I am getting following error.

Severity Code Description Project File Line Suppression State Warning TS1005 (JS) ':' expected. VuejsApp JavaScript Content Files C:\Users\Khundokar Nirjor\Documents\Visual Studio 2017\Projects\VuejsApp\VuejsApp\src\App.vue 21 Active

Here is my App.vue code:

<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>
6
  • it looks like your code is inside an object Commented Jul 11, 2019 at 2:38
  • Can you please explain your opinion?? Commented Jul 11, 2019 at 2:40
  • it's like: { var a = 1 } it's a statement inside an object. object should be { key: value } Commented Jul 11, 2019 at 2:43
  • the button-counter component should be inside the components: { }, right above it Commented Jul 11, 2019 at 2:45
  • the vm part should be outside the object Commented Jul 11, 2019 at 2:45

1 Answer 1

0

the problem here is because the code is inside an object. if you move the button-counter component inside components: { } right above it, and the vm part outside the object, that should solve this problem.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.