How to create Event Bus in Vue 3?

---
In Vue 2, it was:
```js
export const bus = new Vue();
```
```js
bus.$on(...)
bus.$emit(...)
```
---
In Vue 3, `Vue` is not a constructor anymore, and `Vue.createApp({});` returns an object that has no `$on` and `$emit` methods.

Vue.js 3 Event Bus

I tried to use components inside `v-for` loop and init the `ref` to future access some methods of these from parent. Here a simplified code of my case:

    &lt;template&gt;
        &lt;div class=&quot;hello&quot;&gt;
            {{ msg }}
            &lt;ul&gt;
                &lt;list-item 
                    v-for=&quot;item in items&quot; 
                    :key=&quot;item.id&quot; 
                    :value=&quot;item.text&quot; 
                    :ref=&quot;`item${item.id}`&quot;
                /&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
        import ListItem from &quot;./ListItem&quot;;
        export default {
            name: &quot;HelloWorld&quot;,
            components: {
                ListItem
            },
            data() {
                return {
                    msg: &quot;Welcome to Your Vue.js App&quot;,
                    items: [
                        { id: 1, text: &quot;foo&quot; },
                        { id: 2, text: &quot;bar&quot; },
                        { id: 3, text: &quot;baz&quot; },
                        { id: 4, text: &quot;foobar&quot; }
                    ]
                };
            },
            mounted() {
                setTimeout(() =&gt; this.$refs.item2.highlight(), 1500);
            }
        };
    &lt;/script&gt;

And `ListItem` component:

    &lt;template&gt;
        &lt;li v-bind:class=&quot;{ highlight: isHighlighted }&quot;&gt;
            {{value}}
        &lt;/li&gt;
    &lt;/template&gt;

    &lt;script&gt;
        export default {
            name: &quot;list-item&quot;,
            props: [&quot;value&quot;],
            data() {
                return {
                    isHighlighted: false
                };
            },
            methods: {
                highlight() {
                    this.isHighlighted = !this.isHighlighted;
                }
            }
        };
    &lt;/script&gt;

    &lt;!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --&gt;
    &lt;style scoped&gt;
        .highlight {
            color: red;
        }
    &lt;/style&gt;

It&#39;s just renders a few list items and highlights one of them after one and half second. But I got an error: `Uncaught TypeError: _this.$refs.item2.highlight is not a function`  
After debug session I&#39;ve found an interesting fact: refs defined inside `v-for` loop are not a components but the arrays with one component.  
What is the logic, what is the f wrapper? Does anyone meet this case? Can somebody give the explanation of this behaviour?  
Code presented above works fine with `setTimeout(() =&gt; this.$refs.item2[0].highlight(), 1500);`  
Must I always pass `[0]`? Is there exist a better way? Help, please.



Vue.js ref inside the v-for loop

How I can get access to parent&#39;s data variable (limitByNumber) in my child component Post?

I tried to use prop but it doesn&#39;t work.




**Parent:**

    import Post from &#39;./components/Post.vue&#39;;
    
    new Vue ({
        el: &#39;body&#39;,
    
    	components: { Post },
    
    	data: {
    	    limitByNumber: 4
    	}
    });

**Component Post:**

    &lt;template&gt;
        &lt;div class=&quot;Post&quot; v-for=&quot;post in list | limitBy limitByNumber&quot;&gt;
    	&lt;!-- Blog Post --&gt;
        ....
        &lt;/div&gt;
    &lt;/template&gt;

    &lt;!-- script --&gt;    
    &lt;script&gt;
    export default {
        props: [&#39;list&#39;, &#39;limitByNumber&#39;],
        
        created() {
            this.list = JSON.parse(this.list);
        }
    }
    &lt;/script&gt;

Vue.js - Using parent data in component

I&#39;m using Nuxt.js for building a static website. 

How to access in component&#39;s `script` code currently displayed route name (I would like to avoid reading direct url from browser location)? 

Can I somehow access `$route.name` ?

How to get current route name in Nuxt 2 and 3?

I want to bind a custom attribute to an option select menu.
The `&lt;option&gt;` tag would simply have an attribute of `selected=&quot;selected&quot;`

    &lt;template&gt;
      &lt;div&gt;
        &lt;select&gt;
          &lt;option v-for=&quot;&quot; v-bind:selected=&quot;[condition ? selected : notSelected]&quot; value=&quot;&quot;&gt;{{ resource.xprm_name }}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/template&gt;

    data: {
      selected: &quot;selected&quot;,
      notSelected: &quot;&quot;
    }

This does not work, but if I change `v-bind:selected` to `v-bind:class` then it receives the appropriate class, so the logic is working, but not with the `selected` attribute. 

Any way to make it work with such custom attributes?

Set default value to option select menu

I have a normal *single file component* which has both a **computed property** and some **methods**:

    &lt;template&gt;...&lt;/template&gt;
    &lt;script&gt;
    ...
    export default {
        props: [&#39;matches&#39;],
        data: function() {...}  // No problem with these

        computed: {
            formattedMatches: function () {
                let formatted = [];
                this.matches.forEach(function($match, $i, $arr) {
                    formatted[$i] = $match[0];
                };
            });
            return formatted;
        }
        ...

        methods: {
            getData: function() {
                return this.formattedMatches();
            },
            ...
        }
    }
    &lt;script&gt;

When I try to access `this.formattedMatches()` **from the method**, I get a `[Vue warn]: Error in render: &quot;TypeError: this.formattedMatches is not a function&quot;
`.

What is the correct way to achieve what I want?
Thanks in advance.

How to access a computed property from a method in a Single File Component with Vue.js

I&#39;m trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a &#39;test clicked&#39; in the console. I don&#39;t see any errors in the console, so I don&#39;t know what am I doing wrong.

**index.html**

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;vuetest&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
        &lt;!-- built files will be auto injected --&gt;
      &lt;/body&gt;
    &lt;/html&gt;

**App.vue**

    &lt;template&gt;
      &lt;div id=&quot;app&quot;&gt;
        &lt;test v-on:click=&quot;testFunction&quot;&gt;&lt;/test&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    import Test from &#39;./components/Test&#39;
    
    export default {
      name: &#39;app&#39;,
      methods: {
        testFunction: function (event) {
          console.log(&#39;test clicked&#39;)
        }
      },
      components: {
        Test
      }
    }
    &lt;/script&gt;

**Test.vue (the component)**

    &lt;template&gt;
      &lt;div&gt;
        click here
      &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    export default {
      name: &#39;test&#39;,
      data () {
        return {
          msg: &#39;Welcome to Your Vue.js App&#39;
        }
      }
    }
    &lt;/script&gt;

Vue v-on:click does not work on component

While rewriting my VueJs project in typescript, I came across a TypeScript error.

This is a part of the component that has a custom v-model.

An input field in the html has a ref called &#39;plate&#39; and I want to access the value of that. The @input on that field calls the update method written below.


Typescript is complaining that value does not exist on plate. 
    
    @Prop() value: any;

    update() {
        this.$emit(&#39;input&#39;,
            plate: this.$refs.plate.value
        });
    }

template:

    &lt;template&gt;  
    &lt;div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;inputPlate&quot; class=&quot;col-sm-2 control-label&quot;&gt;Plate&lt;/label&gt;
                     
            &lt;div class=&quot;col-sm-10&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputPlate&quot; ref=&quot;plate&quot; :value=&quot;value.plate&quot; @input=&quot;update&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
    &lt;/div&gt;
    &lt;/template&gt;

Vuejs typescript this.$refs.&lt;refField&gt;.value does not exist

In vue.js app, using vuex as state management store, I need to simply change the value of a property in vuex. For this I can follow two methods:

1. Dispatch an `action` method, which will further commit `mutation`, which eventually will change the state.

2. The second method is to commit the `mutation` directly from the component and the mutation method will then change the state.

Currently, I&#39;m using first method like this:

**In Component:**

`this.$store.dispatch(&#39;updateNotice&#39;, &#39;This is some notice&#39;)`

**In Actions:**

`updateNotice ({state, getters, commit}, payload) {
   commit(&#39;UPDATE_NOTICE&#39;, payload)
 }`

**In Mutations:**

`UPDATE_NOTICE (state, payload) {
   state.notice = payload
}`

As you might have noticed, I&#39;m using the `action` method simply to commit a *single* mutation, without any other logic or *async* functionality.

My question is, in this case, should I not directly commit the mutation from the component itself? What is the best practice? Since using `action` method in this simple case seems verbose and serve no specific purpose.

Is there any reason that I should always `commit` actions from a component?
 Afterall, in vuex the `...mapMutations()` have some reason to exist.

Vuex: Skipping Action and committing Mutation directly from Component

I&#39;ve to use two external scripts for the payment gateways. 

Right now both are put in the `index.html` file. 

However, I don&#39;t want to load these files at the beginning itself. 

The payment gateway is needed only in when user open a specific component (`using router-view`). 

Is there anyway to achieve this?

Thanks.

How to add external JS scripts to VueJS Components?

I&#39;m starting to play with vuejs (2.0).
I built a simple page with one component in it.
The page has one Vue instance with data.
On that page I registered and added the component to html. 
The component has one `input[type=text]`. I want that value to reflect on the parent (main Vue instance).

How do I correctly update the component&#39;s parent data?
Passing a bound prop from the parent is not good and throws some warnings to the console. They have something in their doc but it is not working.


vuejs update parent data from child component

I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data inside of the following:

    export default {
        name: &#39;app&#39;,
        data: []
    }

Whereas in other tutorials I see data being bound from:

    new Vue({
        el: &#39;#app&#39;,
        data: []
    )}

**What is the difference, and why does it seem like the syntax between the two is different?** I&#39;m having trouble getting the &#39;new Vue&#39; code to work from inside the &lt;script&gt; tag I&#39;m using from the App.vue generated by the vue-cli.

Vue &#39;export default&#39; vs &#39;new Vue&#39;

**1.** How can I set the default value for a component prop in Vue 2? For example, there is a simple `movies` component that can be used in this way:

    &lt;movies year=&quot;2016&quot;&gt;&lt;movies&gt;



    Vue.component(&#39;movies&#39;, {
        props: [&#39;year&#39;],
    
        template: &#39;#movies-template&#39;,
        ...
    }

But, if a user doesn&#39;t specify the `year`:

    &lt;movies&gt;&lt;/movies&gt;

then the component will take some default value for the `year` prop.

**2.** Also, what is the best way to check if a user did not set the prop? Is this a good way:

    if (this.year != null) {
        // do something
    }

or maybe this:

    if (!this.year) {
        // do something
    }
**?**

Default values for Vue component props &amp; how to check if a user did not set the prop?

I have a component with some form validation. It is a multi step checkout form. The code below is for the first step. I&#39;d like to validate that the user entered some text, store their name in the global state and then send then to the next step. I am using [vee-validate][1] and vuex

&lt;!-- language: lang-html --&gt;

    &lt;template&gt;
    &lt;div&gt;
        &lt;div class=&#39;field&#39;&gt;
            &lt;label class=&#39;label&#39; for=&#39;name&#39;&gt;Name&lt;/label&gt;
            &lt;div class=&quot;control has-icons-right&quot;&gt;
    
                &lt;input name=&quot;name&quot; v-model=&quot;name&quot; v-validate=&quot;&#39;required|alpha&#39;&quot; :class=&quot;{&#39;input&#39;: true, &#39;is-danger&#39;: errors.has(&#39;name&#39;) }&quot; type=&quot;text&quot; placeholder=&quot;First and Last&quot;&gt;
                &lt;span class=&quot;icon is-small is-right&quot; v-if=&quot;errors.has(&#39;name&#39;)&quot;&gt;
                    &lt;i class=&quot;fa fa-warning&quot;&gt;&lt;/i&gt;
                &lt;/span&gt;
            &lt;/div&gt;
            &lt;p class=&quot;help is-danger&quot; v-show=&quot;errors.has(&#39;name&#39;)&quot;&gt;{{ errors.first(&#39;name&#39;) }}&lt;/p&gt;
    
        &lt;/div&gt;
        &lt;div class=&quot;field pull-right&quot;&gt;
            &lt;button class=&quot;button is-medium is-primary&quot; type=&quot;submit&quot; @click.prevent=&quot;nextStep&quot;&gt;Next Step&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
    export default {
        methods: {
            nextStep(){
                var self = this;
    
                // from baianat/vee-validate
                this.$validator.validateAll().then((result) =&gt; {
                    if (result) {
                        this.$store.dispatch(&#39;addContactInfoForOrder&#39;, self);
                        this.$store.dispatch(&#39;goToNextStep&#39;);
                        return;
                    }
                });
            }
        },
        computed: {
            name: function(){
                return this.$store.state.name;
            }
        }
    }
    &lt;/script&gt;

I have a store for handling order state and recording the name. Ultimately I would like to send all of the info from multi step form to the server.

&lt;!-- language: lang-js --&gt;
        
    export default {
      state: {
      	name: &#39;&#39;,
      },
    
      mutations: {
      	UPDATE_ORDER_CONTACT(state, payload){
          state.name = payload.name;

        }
      },
    
      actions: {
      	addContactInfoForOrder({commit}, payload) {
          commit(&#39;UPDATE_ORDER_CONTACT&#39;, payload);
        }
      }
    }

When I run this code I get an error that `Computed property &quot;name&quot; was assigned to but it has no setter.`

How do I bind the value from the name field to the global state? I would like this to be persistent so that even if a user goes back a step (after clicking &quot;Next Step&quot;) they will see the name they entered on this step


  [1]: https://github.com/baianat/vee-validate

Vuex - Computed property &quot;name&quot; was assigned to but it has no setter

I&#39;ve a dynamic view: 

    &lt;div id=&quot;myview&quot;&gt;
      &lt;div :is=&quot;currentComponent&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

with an associated Vue instance:

    new Vue ({
      data: function () {
        return {
          currentComponent: &#39;myComponent&#39;,
        }
      },
    }).$mount(&#39;#myview&#39;);

This allows me to change my component dynamically.

In my case, I have three different components: `myComponent`, `myComponent1`, and `myComponent2`. And I switch between them like this:

    Vue.component(&#39;myComponent&#39;, {
      template: &quot;&lt;button @click=\&quot;$parent.currentComponent = &#39;myComponent1&#39;\&quot;&gt;&lt;/button&gt;&quot;
    }

Now, I&#39;d like to pass props to `myComponent1`.

How can I pass these props when I change the component type to `myComponent1`?

Passing props dynamically to dynamic component in VueJS

[Vue warn]: Property or method is not defined on the instance but referenced during render

# Overview

In Vue.js 2.x, [`model.sync` will be deprecated][1].

So, what is a proper way to communicate between sibling components in [Vue.js 2.x][2]?

----

## Background

As I understand Vue.js 2.x, the preferred method for sibling communication **is to use a store or an event bus**.

According to [Evan][3] (creator of Vue.js):

&gt; It&#39;s also worth mentioning &quot;passing data between components&quot; is
&gt; generally a bad idea, because in the end the data flow becomes
&gt; untrackable and very hard to debug.
&gt;
&gt; If a piece of data needs to be shared by multiple components, prefer
&gt; [global stores][4] or [Vuex][5].

[[Link to discussion][6]]

And:

&gt; `.once` and `.sync` are deprecated. Props are now always one-way down. To
&gt; produce side effects in the parent scope, a component needs to
&gt; explicitly `emit` an event instead of relying on implicit binding.

So, [Evan suggests][7] using `$emit()` and `$on()`.

----

## Concerns

What worries me is:

 - Each `store` and `event` has a global visibility (correct me if I&#39;m wrong);
 - It&#39;s too wasteful to create a new store for each minor communication;

What I want is to some **scope** `events` or `stores` visibility for siblings components. (Or perhaps I didn&#39;t understand the above idea.)

----

# Question

So, what is the correct way to communicate between sibling components?

  [1]: https://github.com/vuejs/vue/issues/2873#issuecomment-223759015
  [2]: https://github.com/vuejs/vue/issues/2873
  [3]: http://forum.vuejs.org/user/evan
  [4]: http://vuejs.org/guide/state-management.html
  [5]: https://github.com/vuejs/vuex/
  [6]: http://forum.vuejs.org/topic/1530/pass-data-between-components/4
  [7]: https://github.com/vuejs/vue/issues/2873#issuecomment-223759341




Communication between sibling components in Vue.js 2.0

I&#39;m  trying to understand how to properly watch for some prop variation.
I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component through a v-for directive, below a simplification of my implementation:
    
    &lt;template&gt;
        &lt;div&gt;
            &lt;player v-for=&quot;(item, key, index) in players&quot;
                :item=&quot;item&quot;
                :index=&quot;index&quot;
                :key=&quot;key&quot;&quot;&gt;
            &lt;/player&gt;
        &lt;/div&gt;
    &lt;/template&gt;
... then inside `&lt;script&gt;` tag:

     data(){
         return {
             players: {}
     },
     created(){
            let self = this;
            this.$http.get(&#39;../serv/config/player.php&#39;).then((response) =&gt; {
                let pls = response.body;
                for (let p in pls) {
                    self.$set(self.players, p, pls[p]);
                }
        });
    }

item objects are like this:

    item:{
       prop: value,
       someOtherProp: {
           nestedProp: nestedValue,
           myArray: [{type: &quot;a&quot;, num: 1},{type: &quot;b&quot; num: 6} ...]
        },
    }

Now, inside my child &quot;player&quot; component I&#39;m trying to watch for any Item&#39;s property variation and I use:
        
    ...
    watch:{
        &#39;item.someOtherProp&#39;(newVal){
            //to work with changes in &quot;myArray&quot;
        },
        &#39;item.prop&#39;(newVal){
            //to work with changes in prop
        }
    }

It works but it seems a bit tricky to me and I was wondering if this is the right way to do it. My goal is to perform some action every time `prop` changes or `myArray` gets new elements or some variation inside existing ones. Any suggestion will be appreciated.

Vue.js - How to properly watch for nested data

I have a Vue 2 project that has many (50+) [single-file components][1]. I use Vue-Router for routing and Vuex for state.

There is a file, called **helpers.js**, that contains a bunch of general-purpose functions, such as capitalizing the first letter of a string. This file looks like this:

&lt;!-- language-all: lang-js --&gt;

    export default {
      capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
      }
    }

My **main.js** file initializes the app:

    import Vue from &#39;vue&#39;
    import VueResource from &quot;vue-resource&quot;
    import store from &quot;./store&quot;
    import Router from &quot;./router&quot;
    import App from &quot;./components/App.vue&quot;

    Vue.use(VueResource)

    const app = new Vue({
      router: Router,
      store,
      template: &#39;&lt;app&gt;&lt;/app&gt;&#39;,
      components: { App },
    }).$mount(&#39;#app&#39;)

My **App.vue** file contains the template:

&lt;!-- language-all: lang-html --&gt;

    &lt;template&gt;
      &lt;navbar&gt;&lt;/navbar&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
    export default {
      data() {
        return {
          // stuff
        }
      }
    }
    &lt;/script&gt;

I then have a bunch of single-file components, which Vue-Router handles navigating to inside the `&lt;router-view&gt;` tag in the App.vue template.

Now let&#39;s say that I need to use the `capitalizeFirstLetter()` function inside a component that is defined in **SomeComponent.vue**. In order to do this, I first need to import it:

    &lt;template&gt;Some Component&lt;/template&gt;

    &lt;script&gt;
    import {capitalizeFirstLetter} from &#39;../helpers.js&#39;
    export default {
      data() {
        return {
          myString = &quot;test&quot;
        }
      },
      created() {
        var newString = this.capitalizeFirstLetter(this.myString)
      }
    }
    &lt;/script&gt;

This becomes a problem quickly because I end up importing the function into many different components, if not all of them. This seems repetitive and also makes the project harder to maintain. For example if I want to rename helpers.js, or the functions inside it, I then need to go into every single component that imports it and modify the import statement.

**Long story short:** how do I make the functions inside helpers.js *globally* available so that I can call them inside *any* component without having to first import them and then prepend `this` to the function name? I basically want to be able to do this:

    &lt;script&gt;
    export default {
      data() {
        return {
          myString = &quot;test&quot;
        }
      },
      created() {
        var newString = capitalizeFirstLetter(this.myString)
      }
    }
    &lt;/script&gt;


  [1]: https://vuejs.org/v2/guide/single-file-components.html

Vue.js - Making helper functions globally available to single-file components

My Vue.js component is like this:

```lang-html
    &lt;template&gt;
        &lt;div&gt;
            &lt;div class=&quot;panel-group&quot; v-for=&quot;item in list&quot;&gt;
                ...
                &lt;div class=&quot;panel-body&quot;&gt;
                    &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; href=&quot;#purchase-{{ item.id }}&quot; class=&quot;pull-right&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseOne&quot;&gt;
                        Show
                    &lt;/a&gt;
                &lt;/div&gt;
                &lt;div id=&quot;purchase-{{ item.id }}&quot; class=&quot;table-responsive panel-collapse collapse&quot; role=&quot;tabpanel&quot;&gt;
                ...
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/template&gt;

    &lt;script&gt;
        export default {
            ...
            computed: {
                list: function() {
                    return this.$store.state.transaction.list
                },
                ...
            }
        }
    &lt;/script&gt;
```

When executed, there exists an error like this:

&gt;  Vue template syntax error:
&gt;
&gt;   id=&quot;purchase-{{ item.id }}&quot;: Interpolation inside attributes has
&gt; been removed. Use v-bind or the colon shorthand instead.

How can I solve it?




How can I solve &quot;Interpolation inside attributes has been removed. Use v-bind or the colon shorthand&quot;? Vue.js 2

My Vue component is like this :

    &lt;template&gt;
        &lt;div&gt;
            &lt;div class=&quot;panel-group&quot;v-for=&quot;item in list&quot;&gt;
                &lt;div class=&quot;col-md-8&quot;&gt;
                    &lt;small&gt;
                       Total: &lt;b&gt;{{ item.total }}&lt;/b&gt;
                    &lt;/small&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
        export default {
            ...
            computed: {
                list: function() {
                    return this.$store.state.transaction.list
                },
                ...
            }
        }
    &lt;/script&gt;


The result of `{{ item.total }}` is 

&gt; 26000000

But I want format it to be like this :

&gt; 26.000.000,00

In jquery or javascript, I can do it

But, How to do it in vue component?

How do I format currencies in a Vue component?

I have a javascript variable which I want to pass globally to Vue components upon instantiation thus either each registered component has it as a property or it can be accessed globally.

Note:: I need to set this global variable for vuejs as a **READ ONLY** property

Apply global variable to Vuejs

This error got me when passing different values to the component.

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/xvnLa.png

How to add multiple data types for VueJs Props?

I&#39;m using the [vue-cli scaffold for webpack](https://github.com/vuejs-templates/webpack)

My Vue component structure/heirarchy currently looks like the following:

- App
    - PDF Template
        - Background
        - Dynamic Template Image
        - Static Template Image
        - Markdown

At the app level, I want a vuejs component method that can aggregate all of the child component&#39;s data into a single JSON object that can be sent off to the server. 

**Is there a way to access child component&#39;s data? Specifically, multiple layers deep?**

If not, what is the best practice for passing down oberservable data/parameters, so that when it&#39;s modified by child components I have access to the new values? I&#39;m trying to avoid hard dependencies between components, so as of right now, the only thing passed using component attributes are initialization values.

**UPDATE:**

Solid answers. Resources I found helpful after reviewing both answers:

 - [Vuex and when to use it](https://vuex.vuejs.org/)
 - [Vuex alternative solution for smaller apps](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch)

VueJS access child component&#39;s data from parent

I&#39;m new to vue.js. Here is my problem:

In a *.vue file like this:


    &lt;template&gt;
      &lt;div id=&quot;a&quot;&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
      export default {
        name: &#39;SquareButton&#39;,
        props: [&#39;color&#39;]
      }
    &lt;/script&gt;

    &lt;style scoped&gt;
        #a {
          background-color: ?
        }
    &lt;style&gt;

How can I use the props `color` in `background-color:` (where is a `?` now).

Thanks.

In vue.js component, how to use props in css?

I&#39;m developing a website with vuejs and at this moment I&#39;m with a problem, I need to get the URL query (page) from a URL like this websitename.com/user/?page=1 but the `this.$router.query.page` gives me an error (Uncaught TypeError: Cannot read property &#39;page&#39; of undefined)

Does someone know something about this problem and can help me?

PS: I can set the query page using

    this.$router.push({name: &#39;userIndex&#39;, query: { page: &#39;123&#39; } });

and I can get the URL normal params like the

    userID -&gt; (websitename.com/user/:userId | websitename.com/user/1)

but I can&#39;t get any query parameter.

VueJs get url query

In the [VueJs 2.0 docs](https://vuejs.org/v2/guide/instance.html) I can&#39;t find any hooks that would listen on `props` changes. 

Does VueJs have such hooks like `onPropsUpdated()` or similar?

**Update**

As @wostex suggested, I tried to `watch` my property but nothing changed. Then I realized that I&#39;ve got a special case:

    &lt;template&gt;
        &lt;child :my-prop=&quot;myProp&quot;&gt;&lt;/child&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
       export default {
          props: [&#39;myProp&#39;]
       }
    &lt;/script&gt;

I am passing `myProp` that the parent component receives to the `child` component. Then the `watch: {myProp: ...}` is not working.

How to listen for &#39;props&#39; changes

Using plain HTML/JS, it is possible to view the JavaScript File objects of selected files for an input element like so:

    &lt;input type=&quot;file&quot; id=&quot;input&quot; multiple onchange=&quot;handleFiles(this.files)&quot;&gt;

However, when converting it to the &#39;Vue&#39; way it doesn&#39;t seem to work as intend and simply returns `undefined` instead of returning an Array of File objects. 

This is how it looks in my Vue template:

    &lt;input type=&quot;file&quot; id=&quot;file&quot; class=&quot;custom-file-input&quot; 
      v-on:change=&quot;previewFiles(this.files)&quot; multiple&gt;

Where the `previewFiles` function is simply the following (located in methods): 

      methods: {
        previewFiles: function(files) {
          console.log(files)
        }
      }

Is there an alternate/correct way of doing this? Thanks

File input on change in vue.js

So I&#39;ve created a simple wrapper component with template like:

    &lt;wrapper&gt;
       &lt;b-table v-bind=&quot;$attrs&quot; v-on=&quot;$listeners&quot;&gt;&lt;/b-table&gt;
    &lt;/wrapper&gt;

using `$attrs` and `$listeners` to pass down props and events.   
Works fine, but how can the wrapper proxy the `&lt;b-table&gt;` named slots to the child?

Vue - how to pass down slots inside wrapper component?

This is my main javascript file:

    import Vue from &#39;vue&#39;
    
    new Vue({
      el: &#39;#app&#39;
    });

My HTML file:

    &lt;body&gt;
        &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
    
        &lt;script src=&quot;{{ mix(&#39;/js/app.js&#39;) }}&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;

Webpack configuration of Vue.js with the runtime build:

    alias: {
        &#39;vue$&#39;: &#39;vue/dist/vue.runtime.common.js&#39;
    }

I am still getting this well known error:

&gt; [Vue warn]: Failed to mount component: template or render function not defined. 
(found in root instance)

How come when I don&#39;t even have a single thing inside my #app div where I mount Vue, I am still getting a render/template error? It says `found in root` but there is nothing to be found because it does not even have any content?

How am I suppose to mount if this does not work?

**Edit:**

I have tried it like this which seems to work:

    new Vue(App).$mount(&#39;#app&#39;);

It make sense because using the `el` property implies you are &#39;scanning&#39; that dom element for any components and it&#39;s useless because the runtime build does not have a compiler. 

Still it is an extremely strange error message to throw, especially when I have my entire #app div emptied out.

Hopefully somebody could confirm my thoughts.

Vue template or render function not defined yet I am using neither?

I have a component with the following hash 

    { 
      computed: { 
        isUserID: { 
          get: function(){
             return this.userId? 
          } 
      }
    }

 

Should I be watching `isUserID` or `userId` for changes? Can you watch computed properties?

Watching computed properties

I&#39;m using vuejs and I wanna know how to have control on inputs (add disabled attribute when necessary). Is there any way to add dynamically attribute in vuejs ? Below my **Textfield component** : 

        &lt;template&gt;
         &lt;input type=&quot;text&quot; placeholder=&quot;{{ placeholder }}&quot; v-model=&quot;value&quot;&gt;
        &lt;/template&gt;
        &lt;script&gt;
        export default  {
          props: {
           disabled: {type: Boolean, default: false},
           placeholder: {type: String, default: &quot;&quot;},
           value: {twoWay: true, default: &quot;&quot;}
          }
         }
        &lt;/script&gt;

 **Usage** :

    &lt;textfield placeholder=&quot;Name&quot; value.sync=&quot;el.name&quot; :disabled=&quot;true&quot;&gt;&lt;/textfield&gt;

How to add dynamically attribute in VueJs

I am using Vue.Js v2. I want to call component1-&gt;c1method in component2-&gt;c2method for reload data after submitting.

    Vue.component(&#39;component1&#39;, {
      methods: {
      	c1method: function(){
         alert(&#39;this is c1method&#39;)
        },
      }
    })
    Vue.component(&#39;component2&#39;, {
      methods: {
      	c2method: function(){
         component(&#39;component1&#39;).c1method()//like this
        },
      }
    })

Vue.js - How to call method from another component

Can I use lodash `_` in all of my vue component?

for example:

I have components organized like below:

`App.vue` &gt; `Parent.vue` &gt; `Child.vue`

I would like all of my component to access `_` lodash without defined in every component vm `data`

===

I am also trying using [Mixins][1]. it works. but the result not expected like this `_().isEmpty()` instead of `_.isEmpty()`


  [1]: https://vuejs.org/guide/mixins.html

Using lodash in all of vue component template

I define the timer in each my-progress, used to update the value of view, but the console shows the value of the constant changes, and the value of view is still not changed, how can I do in the timer to change the value of view

    Vue.component(&#39;my-progress&#39;, {
        template: &#39;\
    			&lt;div class=&quot;progress progress-bar-vertical&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot;&gt;\
    				&lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; :style=&quot;{height: pgvalue}&quot;&gt;{{pgvalue}}\
    				&lt;/div&gt;\
    			&lt;/div&gt;\
        	&#39;,
        data : function(){  
      
        	return {
        		pgvalue : &#39;50%&#39;,
                intervalid1:&#39;&#39;,
        	}
        },
        computed:{
    
            changes : {
                get : function(){
                    return this.pgvalue;
                },
                set : function(v){
                    this.pgvalue =  v;
                }
            }
        },
        mounted : function(){
          
        	this.todo()		
        },
        beforeDestroy () {
          
           clearInterval(this.intervalid1)
        },
        methods : {
                 
        	todo : function(){    		
        		this.intervalid1 = setInterval(function(){
        			this.changes = ((Math.random() * 100).toFixed(2))+&#39;%&#39;;
        			console.log (this.changes);
        		}, 3000);
        	}
        },
    })

here is the link:
[jsbin.com/safolom][1]


  [1]: http://jsbin.com/safolom/edit?html

how to use setInterval in vue component

In my `index.js` file I have manually override the Vuetify `theme` object with my company&#39;s color:

    Vue.use(Vuetify, {
      theme: {
        primary: &#39;#377ef9&#39;,
        secondary: &#39;#1b3e70&#39;,
        accent: &#39;#ff643d&#39;,
        error: &#39;#ff643d&#39;
        ...
      }

Now, I can use these colors from my templates like so:

    &lt;my-text-field name=&quot;input text&quot;
        label=&quot;text&quot;
        value=&quot;text text text text...&quot;
        type=&quot;text&quot;
        color=&quot;primary&quot;&gt;
    &lt;/my-text-field&gt;

What I&#39;m after is using the `primary` or any other variable in the `theme` object defined above, inside my template style:

    &lt;script&gt;
      import { VTextField } from &#39;vuetify&#39;
      export default {
        extends: VTextField
      }
    &lt;/script&gt;

    &lt;style scoped lang=&quot;stylus&quot;&gt;
      label
        color: &lt;seconday color&gt; &lt;-- this is what I&#39;m after
        color: #1b3e70 &lt;-- this works, but not quite good enough for me
    &lt;/style&gt;

I can easily just write the hex value of my colors in the style section, but I don&#39;t want to repeat myself, and would rather use my `theme` object so it will also be easier for my to easily change the colors everywhere, and avoid typos which will lead to mistakes in the colors definitions.

Using custom theming in Vuetify and pass color variables to components

In a Vue 2.0 app, let&#39;s say we have components A, B and C.

A declares, registers and uses B

Is it possible to pass C from A to B?

Something like this:

    &lt;template&gt;
      &lt;div class=&quot;A&quot;&gt;
        &lt;B :child_component=&quot;C&quot; /&gt;
      &lt;/div&gt;
    &lt;/template&gt;

And use C in B somehow.

    &lt;template&gt;
      &lt;div class=&quot;B&quot;&gt;
        &lt;C&gt;Something else&lt;/C&gt;
      &lt;/div&gt;
    &lt;/template&gt;

The motivation: I want to create a generic component `B` that is used in `A` but receives from `A` its child `C`. Actually `A` will use `B` several times passing different &#39;C&#39;s to it. 

If this approach is not correct, what is the proper way of doing it in Vue?

**Answering @Saurabh**

Instead of passing as props, I tried the suggestion inside B.

    &lt;!-- this is where I Call the dynamic component in B --&gt;

    &lt;component :is=&quot;child_component&quot;&gt;&lt;/component&gt;

    //this is what I did in B js
    components: {
     equip: Equipment
    }, 
    data () {
     return {
       child_component: &#39;equip&#39;,
       _list: []
     }
    }

Basically I&#39;m trying to render Equipment, but the dynamic way

I get 3 errors in console and a blank page
&gt; [Vue warn]: Error when rendering component &lt;equipment-form-item&gt; at /home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.vue: 
&gt;
&gt; Uncaught TypeError: Cannot read property &#39;name&#39; of undefined
&gt;
&gt; TypeError: Cannot read property &#39;setAttribute&#39; of undefined

Apparently I&#39;m doing something wrong 

Is it possible to pass a component as props and use it in a child Component in Vue?

My component vue is like this :

    &lt;template&gt;
        &lt;select class=&quot;form-control&quot; v-model=&quot;selected&quot; :required @change=&quot;changeLocation&quot;&gt;
            &lt;option :selected&gt;Choose Province&lt;/option&gt;
            &lt;option v-for=&quot;option in options&quot; v-bind:value=&quot;option.id&quot; &gt;{{ option.name }}&lt;/option&gt;
        &lt;/select&gt;
    &lt;/template&gt;

I use this : `&lt;option :selected&gt;Choose Province&lt;/option&gt;` to selected

But whene executed, on the gulp watch exist error

The error like this :

&gt; ERROR in
&gt; ./~/vue-loader/lib/template-compiler.js?id=data-v-53777228!./~/vue-load
&gt; er/lib/selector.js?type=template&amp;index=0!./resources/assets/js/components/bootst
&gt; rap/LocationBsSelect.vue Module build failed: SyntaxError: Unexpected
&gt; token (28:4)


Seems my step is wrong

How can I solve it?

How can I set selected option selected in vue.js 2?

I&#39;m using the VueJS [Vuetify framework][1] and I need to open a dialog - that gets imported as a component template - from another template. Once the ***Menu* button** in **App.vue** got clicked, the Modal should open.
Here is my setup:

 - App.vue = navigation template with Menu button
 - Modal.vue = Modal template, imported as global in main.js

**main.js**

    import Modal from &#39;./components/Modal.vue&#39;
    Vue.component(&#39;modal&#39;, Modal)

**Modal.vue Template:**

    &lt;template&gt;
      &lt;v-layout row justify-center&gt;
        &lt;v-btn color=&quot;primary&quot; dark @click.native.stop=&quot;dialog = true&quot;&gt;Open Dialog&lt;/v-btn&gt;
        &lt;v-dialog v-model=&quot;dialog&quot; max-width=&quot;290&quot;&gt;
          &lt;v-card&gt;
            &lt;v-card-title class=&quot;headline&quot;&gt;Use Google&#39;s location service?&lt;/v-card-title&gt;
            &lt;v-card-text&gt;Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.&lt;/v-card-text&gt;
            &lt;v-card-actions&gt;
              &lt;v-spacer&gt;&lt;/v-spacer&gt;
              &lt;v-btn color=&quot;green darken-1&quot; flat=&quot;flat&quot; @click.native=&quot;dialog = false&quot;&gt;Disagree&lt;/v-btn&gt;
              &lt;v-btn color=&quot;green darken-1&quot; flat=&quot;flat&quot; @click.native=&quot;dialog = false&quot;&gt;Agree&lt;/v-btn&gt;
            &lt;/v-card-actions&gt;
          &lt;/v-card&gt;
        &lt;/v-dialog&gt;
      &lt;/v-layout&gt;
    &lt;/template&gt;
    &lt;script&gt;
      export default {
        data () {
          return {
            dialog: false
          }
        }
      }
    &lt;/script&gt;

How to open the dialog?


  [1]: https://vuetifyjs.com/

All Vue Component Solutions on Gang of Coders

Total of 39 Vue Component Solutions