atributos.vue

<template>
  <div>
    <img/>
    <table class="table">
      <thead>
        <tr>
          <th>Campo</th>
          <th>Nombre</th>
          <th>Descripción</th>
          <th style="width: 1%; text-align: right">
            <button type="button" class="btn btn-default btn-xs" @click="nuevo">
              <i class="fa fa-plus"></i>
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="atributo of atributos"
          v-dragging="{ item: atributo, list: atributos, group: 'atributos'}"
        >
          <td><input ref="campo" type="text" class="form-control input-sm" v-model="atributo.campo"></td>
          <td><input type="text" class="form-control input-sm" v-model="atributo.nombre"></td>
          <td><input type="text" class="form-control input-sm" v-model="atributo.descripcion"></td>
          <td style="white-space: nowrap;">
            <button type="button" class="btn btn-default btn-xs" @click="eliminar(atributo)">
              <i class="fa fa-times text-danger"></i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: ['atributos'],
  methods: {
    nuevo () {
      this.atributos.push({
        campo: null,
        nombre: null,
        descripcion: null
      })
      this.$nextTick(() => {
        this.$refs.campo.slice(-1)[0].focus()
      })
    },
    eliminar (atributo) {
      if (confirm('¿Seguro que desea eliminar este atributo?')) {
        this.atributos.splice(this.atributos.indexOf(atributo), 1)
      }
    }
  }
}
</script>