<template>
    <div>
        <div v-for="(v,index) in value" :key="v.label">
            <input @input="update" type="number" v-model="v.quantity" min="0" step="0.1">

            <span v-if="v.imutable">
                {{v.label}}
            </span>
            <span v-else>
                <select @input="update" v-model="v.label">
                  <option value="">-</option>
                  <option v-for="item in liste" :value="item" :key="item">
                    {{ item }}
                  </option>
                </select>
                <button v-show="value.length > 1" @click="suppr(index) ; update()" class="fa fa-remove"></button>
            </span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'SegerField',
  props: {
    value: {type: Array, required: true},
    liste: {type: Array, required: true},
  },
  methods: {
    update: function () {
      this.$emit('input', this.value)
    },
    suppr: function (index) {
      this.value.splice(index, 1)
    },
  },

}
</script>

<style scoped>

</style>
