mirror of https://github.com/4xmen/xshop.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
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>
|