forms - Vue.js - 要素 UI - フォームにはすでにテキストが入力されています

Question

Vue Element UI を使用して、データ (ホスト) に基づいて UI フォームを作成し、ホストごとにインライン フォームを作成しています。私の問題は、入力ボックス内の「値」、つまり既に入力されているテキストをホストの対応する値に設定するにはどうすればよいですか?

var Main = {
    data() {
      return {
        formInline: {
          hostname: [],
          role: []
        },
        hosts : [
          {
            id:1,
            hostname: "toy1",
            role: "compute",
          },
          {
            id: 2,
            hostname: "toy2",
            role: "storage",
          },
          {
            id: 3,
            hostname: "toy3",
            role: "storage",
          }
          ]
      };
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@1.3.5/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.5/lib/index.js"></script>
<div id="app">
<div v-for="(host,index) in hosts" v-if="host.roles !==''" :key="host.id" >
<el-form :inline="true" :name="hosts.id" :model="formInline" class="demo-form-inline">
  <el-form-item label="Hostname">
    <el-input v-model="formInline.hostname[index]" placeholder="host.hostname" :value="host.hostname"></el-input>
  </el-form-item>
  <el-form-item label="Role">
    <el-select v-model="formInline.role[index]" placeholder="host.role"  :value="host.role">
      <el-option label="Compute" value="compute"></el-option>
      <el-option label="Storage" value="storage"></el-option>
    </el-select>
  </el-form-item>
</el-form>
</div>
    <button>Apply</button>
</div>