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>

Answer 1

formInline: {
  hostname: ['toy1', 'toy2', 'toy3'],
  role: ['compute', 'storage', 'storage']
}

您的输入模型直接与formInline的索引绑定。所以，这需要绑定数据。