Skip to content

Instantly share code, notes, and snippets.

@sineld sineld/InputEdit.vue forked from nckg/InputEdit.vue
Created Mar 15, 2018

Embed
What would you like to do?
Vue Inline edit
<template>
<div>
<span v-show="!editing"
@click="toggleEdit" v-html="showValue"></span>
<div v-show="editing" class="row">
<div class="col-md-10">
<div class="form-group">
<textarea class="form-control"
rows="3"
v-model="value"
ref="value"></textarea>
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-sm" @click="save">Opslaan</button>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
props: ['url', 'name', 'text'],
data () {
return {
editing: false,
value: this.text
}
},
computed: {
showValue () {
return this.value === '' ? "" : this.value.replace(/\n/gm, '<br>')
}
},
methods: {
toggleEdit () {
this.editing = !this.editing;
Vue.nextTick(() => {
this.$refs.value.focus();
});
},
save () {
let data = {};
data[this.name] = this.value;
axios.put(this.url, data)
.then(() => {
this.toggleEdit();
})
.catch( (err) => {
alert(err);
});
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.