Question

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

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

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

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

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

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

除了select和options的简单示例之外。如何动态生成已创建的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

您可以尝试使用以下代码

tbvc = tabBarController as! CustomTabBar
statisticsData = tbvc.statisticsData

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;
		}

   }
  
  
  
})

如何使用Vuejs动态创建下拉列表？或任何常规组件

1 个答案: