Avoided mutating props directly.

This commit is contained in:
Greenscreener 2021-01-23 09:58:34 +01:00
parent 6a0747410e
commit 12bb2005bb

View File

@ -2,18 +2,18 @@
<div id="hlava">
<div v-on:click="makeactive" v-if="!isactive">
<p class="mx-6 mt-4 has-text-weight-bold has-text-centered">
{{ displaytitle }}
{{ localTitle || "Název hlavy" }}
</p>
<p>
{{ displaytext }}
{{ localText || "Text hlavy" }}
</p>
</div>
<div v-click-outside="makeinactive" v-if="isactive">
<p class="mx-6 mt-4 has-text-weight-bold has-text-centered">
<b-input placeholder="Název hlavy" style="text-align:right;" v-model="title"></b-input>
<b-input placeholder="Název hlavy" style="text-align:right;" v-model="localTitle"></b-input>
</p>
<p>
<b-input placeholder="Text hlavy" v-model="text" type="textarea"></b-input>
<b-input placeholder="Text hlavy" v-model="localText" type="textarea"></b-input>
</p>
<p>
<b-button type="is-danger" class="mt-3" v-on:click="$emit('deletehlava', index)" expanded>Smazat hlavu</b-button>
@ -40,24 +40,24 @@ export default {
this.isactive = true;
},
makeinactive: function () {
this.$emit('update:text', this.text)
this.$emit('update:title', this.title)
this.isactive = false;
}
},
computed: {
displaytitle: function () {
if (!this.title) {
return "Název hlavy"
} else {
localTitle: {
get: function() {
return this.title
},
set: function (value) {
this.$emit('update:title', value)
}
},
displaytext: function () {
if (!this.text) {
return "Text hlavy"
} else {
localText: {
get: function() {
return this.text
},
set: function (value) {
this.$emit('update:text', value)
}
}
}