Use reactive property properly

In previous version, we have modified read-only property directly.

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
This commit is contained in:
Kenji Okimoto 2018-08-02 16:05:53 +09:00
parent 5b882568f7
commit 937fc907b5
No known key found for this signature in database
GPG Key ID: F9E3E329A5C5E4A1
2 changed files with 25 additions and 13 deletions

View File

@ -6,15 +6,25 @@ import "lodash/lodash";
$(document).ready(() => {
const SettingSection = {
template: "#vue-setting-section",
props: ["id", "content", "type", "name", "arg"],
props: ["initialId", "initialContent", "initialType", "initialName", "initialArg"],
data: function() {
return {
mode: "default",
processing: false
processing: false,
id: null,
content: null,
type: null,
name: null,
arg: null
};
},
created: function() {
this.initialState();
this.id = this.initialId;
this.content = this.initialContent;
this.type = this.initialType;
this.name = this.initialName;
this.arg = this.initialArg;
},
computed: {
endpoint: function() {
@ -50,7 +60,7 @@ $(document).ready(() => {
"X-CSRF-Token": token
}
}).then((data)=> {
_.each(data, function(v,k){
_.each(data, (v, k) => {
this[k] = v;
});
this.initialState();

View File

@ -44,19 +44,21 @@
%p.empty= t('.setting_empty')
%setting-section{"v-if" => "loaded && sections.sources.length > 0",
"v-for" => "source in sections.sources",
"v-bind:id" => "source.id",
"v-bind:content" => "source.content",
"v-bind:type" => "source.type",
"v-bind:name" => "source.name",
"v-bind:arg" => "source.arg"}
"v-bind:key" => "source.id",
"v-bind:initial-id" => "source.id",
"v-bind:initial-content" => "source.content",
"v-bind:initial-type" => "source.type",
"v-bind:initial-name" => "source.name",
"v-bind:initial-arg" => "source.arg"}
.col-xl-6.output
%h3= t('.out')
%div{"v-if" => "loaded && sections.matches.length == 0"}
%p.empty= t('.setting_empty')
%setting-section{"v-if" => "loaded && sections.matches.length > 0",
"v-for" => "match in sections.matches",
"v-bind:id" => "match.id",
"v-bind:content" => "match.content",
"v-bind:type" => "match.type",
"v-bind:name" => "match.name",
"v-bind:arg" => "match.arg"}
"v-bind:key" => "match.id",
"v-bind:initial-id" => "match.id",
"v-bind:initial-content" => "match.content",
"v-bind:initial-type" => "match.type",
"v-bind:initial-name" => "match.name",
"v-bind:initial-arg" => "match.arg"}