I think you can simple call like this, this will give you result value.

    this.$route.query.page

Look image $route is object in Vue Instance and you can access with this keyword and next you can select object properties like above one :

[![enter image description here][1]][1]


Have a look Vue-router document for selecting queries value :

[Vue Router Object][2]


  [1]: https://i.stack.imgur.com/hgZn2.png
  [2]: http://router.vuejs.org/en/api/route-object.html

You can also get them with pure javascript. 

For example:

    new URL(location.href).searchParams.get(&#39;page&#39;)

For this url: **websitename.com/user/?page=1**, it would return a value of **1**

Current route properties are present in `this.$route`, `this.$router` is the instance of router object which gives the configuration of the router. You can get the current route query using `this.$route.query`

In my case I `console.log(this.$route)` and returned the fullPath:

    console.js:
    fullPath: &quot;/solicitud/MX/666&quot;,
    params: {market: &quot;MX&quot;, id: &quot;666&quot;},
    path: &quot;/solicitud/MX/666&quot;
    
    console.js: /solicitud/MX/666


I have a string that I converted to a TextInfo.ToTitleCase and removed the underscores and joined the string together.  Now I need to change the first and only the first character in the string to lower case and for some reason, I can not figure out how to accomplish it.  Thanks in advance for the help.

    class Program
    {
        static void Main(string[] args)
        {
            string functionName = &quot;zebulans_nightmare&quot;;
            TextInfo txtInfo = new CultureInfo(&quot;en-us&quot;, false).TextInfo;
            functionName = txtInfo.ToTitleCase(functionName).Replace(&#39;_&#39;, &#39; &#39;).Replace(&quot; &quot;, String.Empty);
            Console.Out.WriteLine(functionName);
            Console.ReadLine();
        }
    }


Results: ZebulansNightmare

Desired Results: zebulansNightmare

UPDATE:

    class Program
    {
        static void Main(string[] args)
        {
            string functionName = &quot;zebulans_nightmare&quot;;
            TextInfo txtInfo = new CultureInfo(&quot;en-us&quot;, false).TextInfo;
            functionName = txtInfo.ToTitleCase(functionName).Replace(&quot;_&quot;, string.Empty).Replace(&quot; &quot;, string.Empty);
            functionName = $&quot;{functionName.First().ToString().ToLowerInvariant()}{functionName.Substring(1)}&quot;;
            Console.Out.WriteLine(functionName);
            Console.ReadLine();
        }
    }

Produces the desired output

Convert String To camelCase from TitleCase C#

I&#39;m looking for a way to include small pieces of data (from my server) with objects during the upload process (e.g. User ID, File ID, etc). After looking at S3 documentation, I&#39;m not sure whether it&#39;s more appropriate to include this data as object tags or object metadata.

Is the purpose of tags for categorization? And metadata for per-object data?

What are the differences? What do you think would be more appropriate for this situation?

Difference between object tags and object metadata?

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

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

I got a problem here, I don&#39;t know what is wrong in my code, but I got a warning in my console, how can I remove this warning?

&gt; [Vue tip]: `&lt;todo-item v-for=&quot;todoItem in todos&quot;&gt;`: component lists rendered with v-for should have explicit keys. See https://vuejs.org/v2/guide/list.html#key for more info.&lt;br&gt;
(found in `&lt;Root&gt;`)

**index.html**

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;meta charset=&quot;utf-8&quot;&gt;
            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
            &lt;title&gt;Vue Tutorial&lt;/title&gt;
            &lt;link rel=&quot;shortcut icon&quot; href=&quot;https://vuejs.org/images/logo.png&quot;&gt;
            &lt;script src=&quot;scripts/vue.js&quot;&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;section id=&quot;app&quot;&gt;
                &lt;p&gt;{{ msg }}&lt;/p&gt;
                &lt;p v-bind:title=&quot;message&quot;&gt;
                    Hover your mouse over me for a few seconds to see my dynamically bound title!
                &lt;/p&gt;
                &lt;div&gt;
                    &lt;p v-if=&quot;seen&quot;&gt;This text will show or hide if the button was clicked.&lt;/p&gt;
                    &lt;button type=&quot;button&quot; v-on:click=&quot;isSeen&quot;&gt;{{ isSeenText }}&lt;/button&gt;
                &lt;/div&gt;
                &lt;ol&gt;
                    &lt;li v-for=&quot;todo in todos&quot;&gt;
                        {{ todo.text }}
                    &lt;/li&gt;
                &lt;/ol&gt;
                &lt;p&gt;Total count: {{ todos.length }}&lt;/p&gt;
                &lt;div v-bind:title=&quot;reverseMessageText&quot;&gt;
                    &lt;p&gt;{{ reverseMessageText }}&lt;/p&gt;
                    &lt;button v-on:click=&quot;reverseMessage&quot;&gt;Reverse Message&lt;/button&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;p&gt;Data binding: &lt;strong&gt;{{ nameOfUser }}&lt;/strong&gt;&lt;/p&gt;
                    &lt;input type=&quot;text&quot; v-model=&quot;nameOfUser&quot;&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;ol&gt;
                        &lt;todo-item v-for=&quot;todoItem in todos&quot; v-bind:data=&quot;todoItem&quot;&gt;&lt;/todo-item&gt;
                    &lt;/ol&gt;
                &lt;/div&gt;
            &lt;/section&gt;
            &lt;script src=&quot;scripts/app.js&quot;&gt;&lt;/script&gt;
        &lt;/body&gt;
    &lt;/html&gt;


&lt;!-- end snippet --&gt;

**app.js**


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var appComponent = Vue.component(&#39;todo-item&#39;, {
        template: &#39;&lt;li&gt;id: {{ data.id }}&lt;br&gt;text: {{ data.text }}&lt;/li&gt;&#39;,
        props: [
            &#39;data&#39;
        ]
    });

    new Vue({
        el: &#39;#app&#39;,
        data: {
            msg: &#39;Hello World!&#39;,
            message: &#39;You loaded this page on &#39; + new Date(),
            seen: true,
            isSeenText: &#39;Now you don\&#39;t&#39;,
            todos: [
                {
                    text: &#39;Learn JavaScript&#39;
                },
                {
                    text: &#39;Learn Vue&#39;
                },
                {
                    text: &#39;Build something awesome&#39;
                }
            ],
            reverseMessageText: &#39;Hello World from Vue.js!&#39;,
            nameOfUser: &#39;John Rey&#39;
        },
        methods: {
            reverseMessage: function() {
                this.reverseMessageText = this.reverseMessageText.split(&#39;&#39;).reverse().join(&#39;&#39;);
            },
            isSeen: function() {
                this.seen = !this.seen;
                this.isSeenText = this.seen ? &#39;Now you don\&#39;t&#39; : &#39;Now you see me&#39;;
            }
        }
    });


    console.log

[![enter image description here][3]][3]


Here is the link that Vue suggested [here][4]. I think i don&#39;t have any error, I want to solve that warning but I cannot find where&#39;s the cause, btw I&#39;m newbie here to Vue.


  [1]: https://i.stack.imgur.com/kNb8w.jpg
  [2]: https://i.stack.imgur.com/9RVtd.png
  [3]: https://i.stack.imgur.com/bb6Dz.jpg
  [4]: https://vuejs.org/guide/list.html#key

Console warning: component lists rendered with v-for should have explicit keys

I have the following Vuex store (main.js):

```javascript
import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

Vue.use(Vuex)

//init store
const store = new Vuex.Store({
    state: {
        globalError: &#39;&#39;,
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

//init app
const app = new Vue({
    router: Router,
    store,
    template: &#39;&lt;app&gt;&lt;/app&gt;&#39;,
    components: { App }
}).$mount(&#39;#app&#39;)
```

I also have the following routes defined for Vue Router (routes.js):

```javascript
import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;

Vue.use(VueRouter)

//define routes
const routes = [
    { path: &#39;/home&#39;, name: &#39;Home&#39;, component: Home },
    { path: &#39;/login&#39;, name: &#39;Login&#39;, component: Login },
    { path: &#39;/secret&#39;, name: &#39;Secret&#39;, component: SecretPage, meta: { requiresLogin: true }
]
```

I&#39;m trying to make it so that, if Vuex stores the `user` object, and it has the `authenticated` property set to `false`, is has the router redirect the user to the login page.

I have this:

```javascript
Router.beforeEach((to, from, next) =&gt; {
    if (to.matched.some(record =&gt; record.meta.requiresLogin) &amp;&amp; ???) {
        // set Vuex state&#39;s globalError, then redirect
        next(&quot;/Login&quot;)
    } else {
        next()
    }
})
```

The problem is I don&#39;t know how to access the Vuex store&#39;s `user` object from inside the `beforeEach` function.

I know that I can have the router guard logic inside components using `BeforeRouteEnter`, but that would clutter up each component. I want to define it centrally at the router level instead.



Accessing Vuex state when defining Vue-Router routes

I have two modules in my vuex store.

    var store = new Vuex.Store({
        modules: {
            loading: loading 
            posts: posts
        }
    });

In the module `loading`, I have a property `saving` which can be set either `true` or `false` and also have a mutation function named `TOGGLE_SAVING` to set this property.

In the module `posts`, before and after fetching posts, I want to change the property `saving`. I am doing it by calling `commit(&#39;TOGGLE_SAVING&#39;)` from one of the actions in the `posts` module. 

    var getPosts = function (context) {
        context.commit(TOGGLE_LOADING);
    };

When it tried to commit, I got following error in the console

    [vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING 

How can I mutate state in another module using `commit`?

Change another module state from one module in Vuex

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

It seems that Vue.js 2.0 doesn&#39;t emit events from a grand child to his grand parent component.

    Vue.component(&#39;parent&#39;, {
      template: &#39;&lt;div&gt;I am the parent - {{ action }} &lt;child @eventtriggered=&quot;performAction&quot;&gt;&lt;/child&gt;&lt;/div&gt;&#39;,
      data(){
        return {
          action: &#39;No action&#39;
        }
      },
      methods: {
        performAction() { this.action = &#39;actionDone&#39; }
      }
    })

    Vue.component(&#39;child&#39;, {
      template: &#39;&lt;div&gt;I am the child &lt;grand-child&gt;&lt;/grand-child&gt;&lt;/div&gt;&#39;
    })

    Vue.component(&#39;grand-child&#39;, {
      template: &#39;&lt;div&gt;I am the grand-child &lt;button @click=&quot;doEvent&quot;&gt;Do Event&lt;/button&gt;&lt;/div&gt;&#39;,
      methods: {
        doEvent() { this.$emit(&#39;eventtriggered&#39;) }
      }
    })

    new Vue({
      el: &#39;#app&#39;
    })

This JsFiddle solves the issue https://jsfiddle.net/y5dvkqbd/4/ , but by emtting two events: 

 - One from grand child to middle component
 - Then emitting again from middle component to grand parent

Adding this middle event seems repetitive and unneccessary. Is there a way to emit directly to grand parent that I am not aware of?


 



VueJs 2.0 emit event from grand child to his grand parent component

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?

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

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

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?

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&#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 have a Vue component that has a prop named &#39;title&#39; e.g:

    &lt;script&gt;
    export default {
      props: [&#39;title&#39;],
      data() {
        return {
        }
      }
    }
    &lt;/script&gt;

I navigate to the component programmatically after a certain action is complete.
Is there a way to programmatically route a user while also setting the prop value? I know you can create a link like this:

    &lt;router-link to=&quot;/foo&quot; title=&quot;example title&quot;&gt;link&lt;/router-link&gt;

However, is there a way to do something like the following?

    this.$router.push({ path: &#39;/foo&#39;, title: &#39;test title&#39; })

EDIT:

As suggested I&#39;ve changed my route to the following:

       {
          path: &#39;/i/:imageID&#39;,
          component: Image,
          props: true
        }

And the navigation to the following: 

    this.$router.push({ path: &#39;/i/15&#39;, params: {title: &#39;test title&#39; }})

However, my Image component (template - see below) still doesn&#39;t show any title.

  

    &lt;h1&gt;{{ title}}&lt;/h1&gt;

Is there anything that could be causing issues?

Content Type	Original Author	Original Content on Stackoverflow
Question	Simão Lemos	View Question on Stackoverflow
Solution 1 - Vuejs2	Mandeep Gill	View Answer on Stackoverflow
Solution 2 - Vuejs2	Brad Ahrens	View Answer on Stackoverflow
Solution 3 - Vuejs2	Srinivas Damam	View Answer on Stackoverflow
Solution 4 - Vuejs2	Jorge Epuñan	View Answer on Stackoverflow

VueJs get url query

Vuejs2 Problem Overview

Vuejs2 Solutions

Solution 1 - Vuejs2

Solution 2 - Vuejs2

Solution 3 - Vuejs2

Solution 4 - Vuejs2

Difference between object tags and object metadata?

Convert String To camelCase from TitleCase C#

Attributions