How to create a dropdown list dynamically using Vuejs? Or any general component

Question

I have been trying to dynamically add a Vue component into my template while the app is running. I know that fundamentally, people usually prefer not to use this type of concept with Vuejs but my current project requires me to do it.

Let's look at a simplified code:

<template>
    <div>
        <object-container>
            <-- I basically want to add a component here -->
        </object-container>
    </div>
</template>

For example once the user clicks on a button, or changes a certain option from the application. My application needs to generate new components according to the input. For our sake, let's assume that we only want to generate a single dropdown list.

Example would be something like: https://v2.vuejs.org/v2/guide/forms.html#Select

However, this needs to be generated dynamically and the options will come from the inputs of the application.

Beyond the simple example of select and options. How can I dynamically generate a vue component that I have created? For example, if I make a component called myDropDown, how can I generate this component dynamically similar to the simple select example? I would assume that it is fairly similar.

Basically I want a functionality similar to jQuery like in this question: How to create dropdown list dynamically using jQuery?

Edit:

I wanted to add some questions similar to mine, unfortunately, none of these really give an answer, I really have no choice but to dynamically generate new components that can not be previously prepared.

append vue js component using jquery

Append dynamic vue component after specific element

There are more examples that have a very similar question, and my question can be tagged as duplicate but I couldn't find any solutions at all.

No one working in Vue has a problem dynamically adding components or elements to the page, we simply recommend not doing it with jQuery or any other method of manipulating the DOM directly. There is likely some state that is driving whether or not you should render a select, and you should build your template accordingly. Build the template as a reflection of state. — Bert
– Bert, Commented Jul 9, 2018 at 20:33
Thank you for the nice example but it seems that the "template" in your example is fixed. Can I change the template dynamically? — Kemal Tezer Dilsiz
– Kemal Tezer Dilsiz, Commented Jul 10, 2018 at 2:28

Hòa Nguyễn Coder · Accepted Answer · 2018-07-10 04:52:02Z

3

You can try use the following code

Vue.component('my-row', {
   props: ['title'],
   template:`<option>{{title}}</option>`,
})
new Vue({
  el: '#box-select',
  data:{
   newTodoText: '',
    items: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ]
  },
   methods:{

   		onChange(key) {
		     this.newTodoText = "id:"+this.items[key-1].id+"/title:"+this.items[key-1].title;
		}

   }
  
  
  
})

	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="box-select">
  <select @change="onChange($event.target.value)">
  		  <option 

  		  		is="my-row"
  		  		v-for="item in items"
				v-bind:title="item.title"
				v-bind:value="item.id"
				
  		  >
		  </option>
  </select>
   <!--  <view-option v-for="item in items" :item="item" :key="item.id"></view-option> -->
  {{newTodoText}}
</div>

answered Jul 10, 2018 at 4:52

Hòa Nguyễn Coder

4433 silver badges8 bronze badges

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

2 Comments

Kemal Tezer Dilsiz Over a year ago

I see how this would allow me to change the options. However, I need to be able to do this for many different components not just dropdowns/selects, do I need to wrap them like this with a separate Vue component every single time? To be able to modify them dynamically?

Kemal Tezer Dilsiz Over a year ago

I think this is the best way to do it but I will research a bit more before I accept it as an answer.

Collectives™ on Stack Overflow

How to create a dropdown list dynamically using Vuejs? Or any general component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related