Vue.js。根据条件列表渲染不同种类的子组件

Question

我不是OOP的新手，尤其是VUE.JS。

我有条件列表，根据这些条件，我应该在页面上显示几种不同类型的组件。

例如，如何动态渲染2个TextInput组件（或3 .. 10），并在单击按钮后在父级中读取输入的文本？

先谢谢您。

Answer 1

要显示项目列表，您只需要在该HTML元素上添加v-for，它将呈现与列表中的项目一样多的元素：

<input 
  v-for="input in inputs" 
  v-show="input.show"
  v-model="input.model"
  @click="handleInputClick($event, input)"
  :placeholder="input.label" 
  type="text"
>

<div>Input 1 model: {{inputs[0].model}}</div>
<div>Input 2 model: {{inputs[1].model}}</div>

data: () => ({
  inputs: [
    { 
      label: 'input 1', 
      model: '',
      show: true
    },
    { 
      label: 'input 2', 
      model: '',
      show: true
    }
  ]
}),
methods: {
  handleInputClick (event, input) {
    console.log(input)
  }
}

并且如果要根据条件显示元素，则可以简单地将该条件添加为属性（在此示例中，我将其称为show。

要创建2向数据绑定，请使用v-model，它将把caurrent值存储在指定的变量中（在此示例中，我将其称为model）