58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<template>
|
|
<div class="buttons has-addons">
|
|
<label class="button is-fullwidth">
|
|
<input type="checkbox" class="checkbox" v-model="selected">
|
|
</label>
|
|
<PercentInput v-show="selected" v-model.number="mod_value"></PercentInput>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PercentInput from './PercentInput.vue'
|
|
|
|
/* Selector for a specific item, with an associated price modifier.
|
|
Acts as checkbox on a v-model, except it populates an array with [value, modifier] instead of value alone
|
|
*/
|
|
|
|
export default {
|
|
props: ["id", "value"],
|
|
components: { PercentInput },
|
|
data () {
|
|
return {
|
|
selected: false,
|
|
mod_value: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
modifier () {
|
|
return 1 + this.mod_value / 100;
|
|
}
|
|
},
|
|
watch: {
|
|
selected (newState) {
|
|
let idx = this._findData();
|
|
var updated = this.value;
|
|
if (newState == true && idx == -1) {
|
|
updated.push([this.id, this.modifier]);
|
|
} else if (newState == false && idx != -1 ) {
|
|
updated.splice(idx, 1);
|
|
}
|
|
this.$emit('input', updated);
|
|
},
|
|
mod_value (newState) {
|
|
let idx = this._findData();
|
|
var updated = this.value;
|
|
if (idx != -1) {
|
|
updated.splice(idx, 1, [this.id, this.modifier]);
|
|
this.$emit('input', updated);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
_findData () {
|
|
return this.value.findIndex(([val,mod]) => this.id == val);
|
|
}
|
|
}
|
|
}
|
|
</script>
|