xshop/resources/js/components/SliderData.vue

<template>
    <div id="slider-data">
        <div class="row">
            <div class="col-4">
                Keys:
            </div>
            <div class="col-8">
                Values:
            </div>
        </div>
        <div class="row mt-2" v-for="(val,i) in values">
            <div class="col-4  px-1">
                <input type="text" placeholder="key" v-model="val.key" class="form-control">
            </div>
            <div class="col-6  px-1">
                <input type="text" placeholder="value" v-model="val.value" class="form-control">
            </div>
            <div class="col-2 text-center px-1">
                <button class="btn btn-danger btn-sm" @click="remValue(i)" type="button">
                    <i class="ri-close-line"></i>
                </button>
            </div>
        </div>
        <br>
        <button class="btn btn-secondary w-100" @click="addValue" type="button">
            <i class="ri-add-line"></i>
        </button>
        <input type="hidden" name="data" :value="JSON.stringify(values)" >
    </div>
</template>

<script>
export default {
    name: "slider-data",
    components: {},
    data: () => {
        return {
            values:[]
        }
    },
    props: {
        dataz:{
            type: Array,
            default: [],
        }
    },
    mounted() {
        this.values = this.dataz;
    },
    computed: {
    },
    methods: {
        addValue(){
            this.values.push({
                'key' : 'key' + (this.values.length + 1),
                'value' : '',
            });
        },
        remValue(i){
            if (confirm('Are you sure?')){
                this.values.splice(i,1);
            }
        }
    }
}
</script>

<style scoped>
#slider-data {
    padding: 1rem;
}
</style>