Display data from API on website

Author: w3bdesign

public/js/app.js

@@ -16286,6 +16286,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
 /* harmony export */ });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  data: function data() {
+    return {
+      products: null
+    };
+  },
   mounted: function mounted() {
     var _this = this;
 
@@ -16294,18 +16299,16 @@ __webpack_require__.r(__webpack_exports__);
       console.log("We got a response!");
       console.log(response.data);
       _this.products = response.data;
+      console.log(_this.products);
     })["catch"](function (error) {
       return console.error(error);
     });
-  },
-  // props: ["foo"],
-  setup: function setup() {
-    //const greeting = "Greetings";
-    var products = {};
-    return {
-      products: products
-    };
   }
+  /*setup() {
+      const products = {};
+      return { products };
+  },*/
+
 });
 
 /***/ }),
@@ -16323,20 +16326,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
-
-var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Testing out API ");
-
-var _hoisted_2 = {
+var _hoisted_1 = {
   key: 0
 };
-
-var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Products is true ... ");
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [_hoisted_1, $setup.products ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, [_hoisted_3, ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.products, function (product) {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [$data.products ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_1, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($data.products, function (product) {
     return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", {
       key: product.id
-    }, " Echoing out name: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.name), 1
+    }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.id) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.name) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.description) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.price), 1
     /* TEXT */
     );
   }), 128

resources/js/components/NewComponent.vue

@@ -1,18 +1,21 @@
 <template>
     <div>
-        Testing out API
         <div v-if="products">
-            Products is true ...
             <div v-for="product in products" :key="product.id">
-                Echoing out name:
-                {{ product.name }}
+                {{ product.id }} - {{ product.name }} -
+                {{ product.description }} - {{ product.price }}
             </div>
         </div>
     </div>
 </template>
 
 <script>
 export default {
+    data() {
+        return {
+            products: null,
+        };
+    },
     mounted() {
         axios
             .get("/api/products")
@@ -21,15 +24,15 @@ export default {
                 console.log("We got a response!");
                 console.log(response.data);
                 this.products = response.data;
+                console.log(this.products);
             })
             .catch((error) => console.error(error));
     },
-    // props: ["foo"],
-    setup() {
-        //const greeting = "Greetings";
+
+    /*setup() {
         const products = {};
         return { products };
-    },
+    },*/
 };
 </script>
 

resources/views/welcome.blade.php

@@ -26,13 +26,8 @@
             @endif
 
             <div id="app">
-
-                <test-component foo="bar1"></test-component>
-                <new-component foo="bar2"></new-component>
-
-                <div class="text-white bg-black">White text</div>
+                <new-component></new-component>
             </div>
-
             <script src="{{ mix('js/app.js') }}"></script>
     </body>
 </html>