VArrayEditor

VArrayEditor.vue

<template>
  <v-list>
    <v-list-item v-for="(item, i) in items" :key="'x' + i">
      <v-text-field
        :value="item"
        @change="
          (v) => {
            items[i] = v
            change()
          }
        "
      />
      <v-list-item-icon>
        <v-icon
          color="blue"
          @click="
            items.splice(i, 1)
            change()
          "
        >
          mdi-minus-box-outline
        </v-icon>
      </v-list-item-icon>
    </v-list-item>
    <v-list-item>
      <v-list-item-action>
        <v-btn
          @click="
            items.push('')
            change()
          "
          ><v-icon left color="blue"> mdi-plus-box-outline </v-icon>Add</v-btn
        >
      </v-list-item-action>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  props: {
    value: { type: Array, default: () => [] },
    type: { type: String, default: "no value provided" },
    obj: { type: Object, default: () => ({}) },
  },
  data: () => ({
    items: [],
  }),
  mounted() {
    console.log("starting Arrayeditor with", this.value, this.type, this.obj)
    this.items = [...this.value]
  },
  methods: {
    change() {
      this.$emit("input", this.items)
    },
  },
}
</script>