Vue.js Dynamic Values in Component

vue dynamic component
vue-router dynamic component
vue add component on:click
vue component template
vue nested components
vue pass data to component
vue dynamic component props
use vue component in html

I'm building a decoupled application with Vue.js, consuming data from WordPress' Rest API. The application includes a sort by category feature. I can't use vanilla form inputs to accomplish this and still match the design, to I need to use a Vue component to list the categories. The issue I have is that I can't populate the name of the category in the component's template.

The component code:

Vue.component( 'sort-button', {
        props: ['value'],
        template: `
          <button class="button button-accent"
            v-bind:value="value"               
            v-on:input="$emit( 'input', $event.target.value )"
          >
          <a href="#">{{ cat.name }}</a>
        `
    }
);

I'm displaying this as in-DOM template, like so:

<sort-button v-for="cat in portfolioCats"></sort-button>

This loops through each category and gives me a corresponding button if I leave the a tag contents of the template static or blank. However, if I use the {{ cat.name }} mustache, it errors because cat is not defined.

My question: How can I make the template aware of cat in the context of the for loop? Note that I would like for this to be a re-usable component that I can plugin into other Vue instances within the site.

Thanks!


You need to pass the variable cat as a prop.

<sort-button v-for="cat in portfolioCats" :cat="cat"></sort-button>

And add it to the props array.

props: ['value', 'cat']

How to make your components dynamic in Vue.js, Before you can create dynamic components in Vue.js, you will need the they opted to extend its capabilities to include storing data values per  Working with Dynamic Components in Vue.js by Raymond Camden on October 31, 2018 | Comments I'm currently deep into a project using NativeScript Vue and ran into an interesting problem that - thankfully - had an incredibly simple solution in Vue.


cat is not defined in the component. You need a prop for it, and you also need to supply the value for value.

<sort-button v-for="cat in portfolioCats" :name="cat.name" :value="cat.value"></sort-button>

So your template should be

Vue.component( 'sort-button', {
    props: ['value', 'name'],
    template: `
      <button class="button button-accent"
        v-bind:value="value"               
        v-on:input="$emit( 'input', $event.target.value )"
      >
      <a href="#">{{ name }}</a>
    `
});

Also, buttons don't typically have input events, so it's not clear what you're expecting to happen there. Possibly you want a click event.

Just noticed you aren't closing your <button> tag, too. It's odd to put an anchor inside a button; maybe you want the button to close before the anchor.

Components Basics, For some properties such as value to work as you would That's all you need to know about dynamic components for  new Vue ( { // components: { 'my-component': () => import('./my-async-component') } }) If you’re a Browserify user that would like to use async components, its creator has unfortunately made it clear that async loading “is not something that Browserify will ever support.”. Officially, at least.


One option would be to use a slot so you can define the content from the parent context. For example

<button class="button button-accent"
        :value="value"               
        @input="$emit( 'input', $event.target.value )">
  <slot></slot>
</button>

and in the parent...

<sort-button v-for="cat in portfolioCats" v-model="something" :key="cat.id">
  <a href="#">{{ cat.name }}</a>
</sort-button>

Working with Dynamic Components in Vue.js, Working with Dynamic Components in Vue.js supports passing an object and expanding the key/value pairs out as attributes and values. Introducing the <component></component> Tag. Conceptually, the <component> tag is incredibly simple. It just takes a string (or component definition) :is prop. Vue then looks up the component referenced by that string and renders it in place of the <component> tag.


Dynamic components using VueJS - DEV, This will load the async component "super-article", and show it via the "​component" tag. I'd like to handle the case when a user enters a bad value  With Vue.js it is unbelievably easy to render dynamic components, which we can utilize to render content with specific components and layouts by only using their name. A basic content JSON that should be rendered


How to render dynamic component defined in JSON using Vue.js , With Vue.js it is unbelievably easy to render dynamic components, and bar with different title/headline values and they will be rendered as if  A dynamic table with sorting, filtering, editing, pagination, multiple select, etc. vue-table-dynamic is a vue component of dynamic table. It's designed to respond to data changes in real time, and oriented to the runtime. View Demo View Github.


Vue.js Components, The value of v-bind:is can contain either the name of a registered component… Vue.js Components — Slots and Dynamic Components. What if the dynamic content has recursive child tags that also have v-model mapping back to the parent vue component where the component tag above is defined in? I need to dynamically have all recursively generated content render with the v-model hooks working.