Untitled

<script setup>
import { ref } from 'vue'
import Field from './Field.vue'

var kvs = ref({})
var k = ref('')
var v = ref('')

/*function add() {
    console.log(this)
    kvs[this.k] = this.v
    k.value = ''
    v.value = ''
}*/
</script>

<template>
<div class="c--spam">
    <h3><slot /></h3>
    <div>
        <div><label>KEY</label><label>VALUE</label></div>
        <div v-for="kv in Object.entries(kvs)">
            <Field></Field>
            <Field></Field>
            <button @click="delete kvs[kv[0]]">DEL</button>
        </div>
        <div>
            <Field @onchange="(_) => { k = _ }"></Field>
            <Field @onkeydown="(_) => { v = _; console.log('spam') }"></Field>
            <button @click="() => {kvs[k] = v; k = ''; v = ''} ">ADD</button>
        </div>
    </div>
</div>
</template>

<style>
.c--spam > div > div{
    display: grid;
    grid-template-columns: 1fr 1fr 0.1fr;
    gap: 10px;
    margin-bottom: 15px;
}

</style>