JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" rel="stylesheet">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="demo">
	<div>
		<input v-model="xfuncArgs.FuncArgNm" required type="text" name="fname1" :key="xfuncArgs.FuncArgNm">
		<input v-model="xfuncArgs.sqlType" required type="text" name="fname2">
		<input v-model="xfuncArgs.ArgDefVal" required type="text" name="fname3">
		<button @click="addData(xfuncArgs)" class="btn btn-primary">추가</button>
	</div>
	
	<div>
		<button @click="saveData(funcArg)" class="btn btn-danger">저장</button>
	</div>
	
	<div class="row g-3" v-for="(funcArg, index) in funcArgs" :key="funcArg.FuncArgNm">
		<div class="col">
			<input type="text" v-model="funcArg.FuncArgNm" class="form-control" />
		</div>
		<div class="col">
			<input type="text" v-model="funcArg.sqlType" class="form-control" />
		</div>
		<div class="col">
			<input type="text" v-model="funcArg.ArgDefVal" class="form-control" />
		</div>
		<div class="col">
			<button @click="removeData(funcArg.FuncArgNm)" class="btn btn-primary">제거</button>
		</div>
	</div>
</div>

JavaScript

const { createApp } = Vue

createApp({
    data () {
        return {
        	funcArgs: [
                {"FuncArgNm": "abc", "sqlType": "123", "ArgDefVal": "XXX"}
            ],
            xfuncArgs: []
        }
    },
    methods: {
        addData(xfuncArgs) {
            this.funcArgs.push({"FuncArgNm": xfuncArgs.FuncArgNm, "sqlType": xfuncArgs.sqlType, "ArgDefVal": xfuncArgs.ArgDefVal});
            this.xfuncArgs.FuncArgNm = "";
            this.xfuncArgs.sqlType = "";
            this.xfuncArgs.ArgDefVal = "";
        },
        removeData(data) {
        	this.funcArgs = this.funcArgs.filter(item => item.FuncArgNm != data);
        },
        saveData(data) {
        	alert(JSON.stringify(this.funcArgs));
        }
    }
}).mount('#demo')