Skip to content

Instantly share code, notes, and snippets.

@PierBover
Created November 19, 2018 02:13
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PierBover/0426686821c57332961fe6171f03e387 to your computer and use it in GitHub Desktop.
Save PierBover/0426686821c57332961fe6171f03e387 to your computer and use it in GitHub Desktop.
<div id="my-thing-template">
<div class="my-thing" @click='edit'>
<div v-if="!editing">{{thing}}</div>
<div v-else>
<form @submit.prevent="onSubmit">
<input type="text" v-model="form.title">
<button type="submit">Submit</button>
<button @click="cancelEdit">Cancel</button>
</form>
</div>
</div>
</div>
<script>
Vue.component('my-thing', {
data: {
editing: false,
form: {
title: ''
}
},
props: ['thing'],
template: '#my-thing-template',
watch: {
thing (val) {
this.form.title = val;
}
},
methods: {
edit () {
this.editing = true;
},
cancelEdit () {
this.editing = false;
},
onSubmit () {
// something with this.thingTitle
}
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment