Merge pull request #26 from oslabs-beta/keyla/debugCodeSnippet

Keyla/debug code snippet

Author: JaceCrowe

src/components/right-sidebar/CodeSnippet.vue

@@ -86,7 +86,6 @@ export default {
     },
     // Creates <template> boilerplate
     writeTemplateTag(componentName, activeComponent) {
-      // console.log(this.activeComponentObj)
       const htmlElementMap = {
         div: ["<div", "</div>"],
         button: ["<button", "</button>"],
@@ -128,11 +127,11 @@ export default {
           } else {
             nestedString += htmlElementMap[child.text][0];
             if (child.class !== "") {
-              nestedString += " " + "class = " + `"${child.class}"`;
+              nestedString += " " + "class=" + `"${child.class}"`;
             }
             if (child.binding !== "") {
               if (child.text !== 'img' || child.text !== 'link') {
-                nestedString += ` v-model = "${child.binding}"`
+                nestedString += ` v-model="${child.binding}"`
 
               }
             }
@@ -165,16 +164,16 @@ export default {
           outputStr += htmlElementMap[el.text][0]
           //if conditional to check class
           if (el.class !== "") {
-            outputStr += " " + "class = " + `"${el.class}"`;
+            outputStr += " " + "class=" + `"${el.class}"`;
+          }
+          
+          if (el.binding !== "") {
+            outputStr += ` v-model="${el.binding}"`
           }
           // add an extra slash at the end for child Components and single tags
           if(childComponents.includes(el.text) || el.text === "img" || el.text === "input" || el.text === "link"){
             outputStr += "/"
           }
-
-          if (el.binding !== "") {
-            outputStr += ` v-model = "${el.binding}"`
-          }
           outputStr += ">";
           if (el.children.length) {
             outputStr += "\n";
@@ -227,30 +226,31 @@ export default {
       // if true add data section and populate with props
       let data = "";
       if (this.componentMap[this.activeComponent].props.length) {
-        data += "  data () {\n    return {";
+        data += "  props: {";
         this.componentMap[this.activeComponent].props.forEach((prop) => {
-          data += `\n      ${prop}: "PLACEHOLDER FOR VALUE",`;
+          data += `\n    ${prop}: "PLACEHOLDER FOR VALUE",`;
         });
         data += "\n";
-        data += "    }\n";
+        //data += "    }\n";
         data += "  },\n";
       }
       const htmlBinding = this.componentMap[this.activeComponent].htmlList
 
-      data += "  data () {\n return {\n"
+      data += "  data() {\n    return {\n"
       htmlBinding.forEach(el => {
         if (el.binding !== '') {
-          data += `    "${el.binding}": "PLACEHOLDER FOR VALUE", `
+          data += `      "${el.binding}": "PLACEHOLDER FOR VALUE", `
           data += '\n'
         }
       })
-      data += ` \n  }  \n `
+      data += `    }`
+      data += ` \n  },  \n `
 
 
       // if true add computed section and populate with state
       let computed = "";
       if (this.componentMap[this.activeComponent].state.length) {
-        computed += "  computed: {";
+        computed += " computed: {";
         computed += "\n    ...mapState([";
         this.componentMap[this.activeComponent].state.forEach((state) => {
           computed += `\n      "${state}", `;
@@ -299,7 +299,7 @@ export default {
         output += imports + "\nexport default defineComponent ({\n  name: '" + componentName + "';";
       } else {
         output = "\n\n<script>\n";
-        output += imports + "\nexport default {\n  name: '" + componentName + "';";
+        output += imports + "\nexport default {\n  name: '" + componentName + "'";
       }
       output += ",\n  components: {\n";
       output += childrenComponentNames + "  },\n";