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