javascript - 如何使用 Vuejs 动态创建下拉列表？或任何通用组件

Question

我一直在尝试在应用程序运行时将 Vue 组件动态添加到我的模板中。我知道从根本上说，人们通常不喜欢在 Vuejs 中使用这种类型的概念，但我目前的项目要求我这样做。

让我们看一个简化的代码:

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

例如，一旦用户点击按钮，或更改应用程序中的某个选项。我的应用程序需要根据输入生成新组件。为了我们的利益，让我们假设我们只想生成一个下拉列表。

例如:https://v2.vuejs.org/v2/guide/forms.html#Select

但是，这需要动态生成，选项将来自应用程序的输入。

超越选择和选项的简单示例。如何动态生成我创建的 vue 组件？例如，如果我制作了一个名为 myDropDown 的组件，我如何才能动态生成该组件，类似于简单的 select 示例？我认为它非常相似。

基本上我想要一个类似于 jQuery 的功能，就像这个问题:How to create dropdown list dynamically using jQuery?

编辑:

我想补充一些与我类似的问题，不幸的是，这些都没有真正给出答案，我真的别无选择，只能动态生成以前无法准备的新组件。

append vue js component using jquery

Append dynamic vue component after specific element

有更多的例子有一个非常相似的问题，我的问题可以被标记为重复，但我根本找不到任何解决方案。

Answer 1

你可以尝试使用下面的代码

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/vue@2.5.16/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>