From 937fc907b5e00b1e3c5671503ccba4185c04dda3 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 2 Aug 2018 16:05:53 +0900
Subject: [PATCH] Use reactive property properly

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

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/settings.js              | 16 +++++++++++---
 .../settings/source_and_output.html.haml      | 22 ++++++++++---------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/app/javascript/packs/settings.js b/app/javascript/packs/settings.js
index 456e7e4..0fcf9b5 100644
--- a/app/javascript/packs/settings.js
+++ b/app/javascript/packs/settings.js
@@ -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();
diff --git a/app/views/fluentd/settings/source_and_output.html.haml b/app/views/fluentd/settings/source_and_output.html.haml
index 8c1de68..5577cea 100644
--- a/app/views/fluentd/settings/source_and_output.html.haml
+++ b/app/views/fluentd/settings/source_and_output.html.haml
@@ -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"}