Vue.js return component value to vanilla javascript

Question

I'm wondering if I am able to get a components data, the count property in this instance and console.log it into normal javascript, is this possible? I'm wanting to do console.log(btn.data.count) in this case

 <div id="app" v-cloak>
        <h1>{{greeting}}</h1>

        <button-counter></button-counter>
    </div>
    <script src="https://unpkg.com/vue@next"></script>

    <script>


        let app = Vue.createApp({
            data: function(){
                return {
                  greeting: "hi"
                }
            }
        })

        let btn = app.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })
        console.log(btn.data.count) // doesn't work
        app.mount("#app")
    </script>

you should register you component inside components i guess — Ilijanovic
– Ilijanovic, Commented Nov 20, 2021 at 10:36

Thomas · Accepted Answer · 2021-11-20 10:31:54Z

3

There might be multiple instances of the button-counter component, so you cannot ask for the count.

You can only access the data from within the component itself. For example from within a method that handles the click event:

        let btn = app.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            methods: {
              onClick() {
                console.log(this.count)
                this.count++
              }
            },
            template: '<button v-on:click="onClick">You clicked me {{ count }} times.</button>'
        })

answered Nov 20, 2021 at 10:31

Thomas

183k57 gold badges383 silver badges510 bronze badges

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

Comments

Vojin Purić · Accepted Answer · 2021-11-20 10:32:25Z

0

You can use console.log normally you just need to use it where it makes sense. It does not make sense using it before #app is mounted.

Try writing a method for your count++ and add console log there you will see that it gets executed every time.

answered Nov 20, 2021 at 10:32

Vojin Purić

2,3957 gold badges12 silver badges27 bronze badges

Collectives™ on Stack Overflow

Vue.js return component value to vanilla javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related