vue将el-input使用v-for循环遍历内容到框内

问题遇到的现象和发生背景

在使用el-input的时候使用v-for循环出内容在input框上 ，但是每次使用v-for都失败了。

问题相关代码，请勿粘贴截图

 <el-form-item label="姓名">
            <el-input size="mini"  v-model="appInfo.name" readonly></el-input>
   </el-form-item>  
 <el-form-item label="性别">
            <el-input size="mini"  v-model="appInfo.sex" readonly></el-input>
   </el-form-item>  
 <el-form-item label="科目">
            <el-input size="mini"  v-model="appInfo.course" readonly></el-input>
   </el-form-item>  

```javascript

  data() {
     return {
      appInfo: {
        name: "小明",
        age: 26,
        sex: '男',
        address: "北京市朝阳区朝阳小学",
        course: [
            {
                subjects: '数学',
                calss: "二年级",
            },
            {
                subjects: '英语',
                calss: "二年级",
            },
            {
                subjects: '语文',
                calss: "三年级",
            },
        ], 
      },
    }
}

###### 运行结果及报错内容 
每次执行使用的时候就直接连着input框都丢失

###### 我的解答思路和尝试过的方法 
尝试过在外面添加个盒子，但是是会将input执行多条。

###### 我想要达到的结果





![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/366028472556165.jpg "#left")

<el-input :value="appInfo.course.map(e=>e.subjects).join('、')"></el-input>

<input v-for="i in appInfo.course" :value="i.subjects"></input>

有报错么，贴一下

你是说 科目 input 里显示 数学、英语、语文？

你怎么循环的