vue2中如何封装一个动态的搜索组件?

Question

vue2中如何封装一个动态的搜索组件?
  在Vue2中动态的搜索组件,根据父组件中的数据来动态的显示,例如```
父组件中
```javascript
searchData: [{
          name: "按电话类型",
          type: "select",
          options: [{
              label: "手机",
              value: "手机"
            },
            {
              label: "固话",
              value: "固话"
            },
          ],
        },
        {
          name: "按电话号码",
          type: "text"
        },
        {
          name: "按归属地",
          type: "text"
        },
      ],

想实现的效果为

关键代码如下 
<template>
  <div style="display:flex">
    <div v-for="(value, index) in searchData" :key="index" style="margin-right:10px">
      <el-input v-model=Item v-if="value.type == 'text'" :placeholder="value.name" ></el-input>
     
      <el-select v-if="value.type == 'select'" :placeholder="value.name">
        {{ value.options }}
        <el-option> 
          <!--以下写法错误, 不知如何写 -->
       _  ** v-for="item in value.options  " :key="item.value" :label="item.label"
          :value="item.value">**_
      </el-option> 
      </el-select>  
   
    </div>
    <el-button type="info" icon="el-icon-search" @click="find">查询</el-button>
  </div>
</template>

以上写法中 el-select中绑定不了数据,如下图

请有能力的朋友帮忙看看,谢谢!

Answer 1

<el-select v-if="value.type == 'select'" :placeholder="value.name">
        <el-option  v-for="item in value.options  " :key="item.value" :label="item.label"  :value="item.value"> 
      </el-option> 
    </el-select> 

这样就可以了，数据没问题，这样循环即可