davy_yg

I get the following error when trying to run : npm run dev

@ development E:\xampp72\htdocs\aws_admin_vue cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

10% building 2/5 modules 3 active ...n_vue\node_modules\style-loader\lib\addStyles.jsBrowserslist: caniuse-lite is outdated. Please run next command yarn upgrade 98% after emitting SizeLimitsPlugin

ERROR Failed to compile with 5 errors 1:32:33 PM These dependencies were not found:

• numeral-es6 in ./resources/js/app.js
• semantic-ui-vue in ./resources/js/app.js
• vue in ./resources/js/app.js
• vue-content-placeholders in ./resources/js/app.js
• vuejs-auto-complete in ./resources/js/app.js

To install them, you can run: npm install --save numeral-es6 semantic-ui-vue vue vue-content-placeholders vuejs-auto-complete Asset Size Chunks Chunk Names /css/app.css 0 bytes /js/app [emitted] /js/app /js/app.js 84.4 KiB /js/app [emitted] /js/app \vendor\froala-editor\css\froala_editor.pkgd.min.css 76.5 KiB [emitted] \vendor\froala-editor\js\froala_editor.pkgd.min.js 636 KiB [emitted]

ERROR in ./resources/js/components/Blog.vue?vue&type=template&id=7c31058d& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Blog.vue?vue&type=template&id=7c31058d&) Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error)

Errors compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

1 | 2 |

{{ this.props_blog_title }}

| ^^^^ 3 | | ^^^^ 4 | | 5 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 6 | | 7 | {!! Str::limit(this.props_blog_content, 500, '...') !!} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 8 | | 9 | | 10 | | ^^^^^^^^ 11 | Read More .. | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

src="{{ url(Storage::url(this.props_blog_image)) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

3 | 4 | 5 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 6 | 7 | {!! Str::limit(this.props_blog_content, 500, '...') !!}

href="{{ url('/f_blog_detail/'.$blog->id) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

9 | 10 | 11 | Read More .. | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 12 |

@ ./resources/js/components/Blog.vue?vue&type=template&id=7c31058d& 1:0-208 1:0-208 @ ./resources/js/components/Blog.vue @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/components/Slides.vue?vue&type=template&id=870633e6& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Slides.vue?vue&type=template&id=870633e6&) Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error)

Errors compiling template:

src="{{ url(Storage::url($item->image)) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

18 | @if($loop->first) 19 | 20 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 21 | 22 |

{{ $item->title }}

src="{{ url(Storage::url($item->image)) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

27 | @if(!($loop->first)) 28 | 29 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 30 | 31 |

{{ $item->title }}

src="{{ url('frontend/images/download-now.jpg') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

78 | 79 | 80 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 81 | 82 |

href="{{ url('frontend/aws proposal.pdf') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

78 | 79 | 80 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 81 | 82 |

src="{{ url('frontend/images/free-quotes.png') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

82 | 83 | 84 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 85 | 86 |

href="{{ url('f_contact') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

82 | 83 | 84 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 85 | 86 |

src="{{ url('frontend/images/icons.jpg') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

88 | 89 | 90 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 91 | 92 |

invalid expression: Unexpected token '>' in

_s($item->title)

Raw expression: {{ $item->title }}

20 | 21 | 22 |

{{ $item->title }}

| ^^^^^^^^^^^^^^^^^^ 23 | 24 |

invalid expression: Unexpected token '>' in

_s($item->title)

Raw expression: {{ $item->title }}

29 | 30 | 31 |

{{ $item->title }}

| ^^^^^^^^^^^^^^^^^^ 32 | 33 |

@ ./resources/js/components/Slides.vue?vue&type=template&id=870633e6& 1:0-210 1:0-210 @ ./resources/js/components/Slides.vue @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'numeral-es6' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 4:0-34 19:17-24 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'semantic-ui-vue' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 2:0-37 7:8-14 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'vue' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 1:0-22 7:0-3 8:0-3 9:0-3 10:0-3 11:0-3 12:22-25 17:17-20 20:0-3 21:0-3 22:13-16 23:17-20 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'vue-content-placeholders' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 6:0-62 8:8-30 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'vuejs-auto-complete' in 'E:\xampp72\htdocs\aws_admin_vue\resources\js' @ ./resources/js/app.js 5:0-47 @ multi ./resources/js/app.js ./resources/sass/app.scss npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ACER\AppData\Roaming\npm-cache_logs\2020-06-26T06_32_33_947Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ dev: npm run development npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ACER\AppData\Roaming\npm-cache_logs\2020-06-26T06_32_34_050Z-debug.log

E:\xampp72\htdocs\aws_admin_vue>

Any clue why?

Hello, please cek this blog component:

blog.blade.php

@include('template/header')

<div class="container">
<h1><b>BLOG</b></h1><br><br>


@foreach($list as $blog)

<blog
    :props_blog_title = '$blog->title'
    :props_blog_image = '$blog->image'
        :props_blog_content = '$blog->content'
    >
	</blog>

@endforeach

Blog.vue

<template>
	<b><h3>{{ this.props_blog_title }}</h3></b><br>
	<br>

	<img class="img-responsive" src="{{ url(Storage::url(this.props_blog_image)) }}" width="400px"><br><br>

	{!! Str::limit(this.props_blog_content, 500, '...') !!}


	<br><br>
	<a href="{{ url('/f_blog_detail/'.$blog->id) }}">Read More ..</a><br><br>
</template>

<script>
	import axios from 'axios'

	export default {
    name: 'WishlistButton',
    props: {
        props_blog_title: null,
        props_blog_image: null,
        props_blog_content: null
    },
    data () {
        return {
            
        }
    },
    mounted() {
        
    },
    methods : {
        
    }
	}
</script>

app.js

import Vue from 'vue'
import SuiVue from 'semantic-ui-vue'
import axios from 'axios'
import numeral from 'numeral-es6'
import Autocomplete from 'vuejs-auto-complete'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(SuiVue)
Vue.use(VueContentPlaceholders)

Vue.component('axios', axios);
Vue.component('slides', require('./components/Slides.vue').default);
Vue.component('blog', require('./components/Blog.vue').default);

I tested the program and the component does not appears. I wonder why?

Hello,

I would like to use component vue for the slideshow banner.

This is the original code:

index.blade.php

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-12" >
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
          
          @foreach($data3 as $item)

            @if($loop->first)
            <div class="item active">
              <img src="{{ url(Storage::url($item->image)) }}" alt="Los Angeles">
              <div class="carousel-caption">
                <h3>{{ $item->title }}</h3>
              </div>
            </div>
            @endif

            @if(!($loop->first))
            <div class="item">
              <img src="{{ url(Storage::url($item->image)) }}" alt="Los Angeles">
              <div class="carousel-caption">
                <h3>{{ $item->title }}</h3>
              </div>
            </div>
            @endif
            
          @endforeach
          </div>
         
          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span><i class="fa fa-angle-left"></i></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span><i class="fa fa-angle-right"></i></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>

Using vue component:

index.blade.php

<?php
// defined('BASEPATH') or exit('No direct script access allowed');

?>

  <!DOCTYPE html>
<html lang="en">

  @include('template/header')

    <body>

     <slides
   	   :props_slides_title = '$item->title'
   	   :props_slides_image_path = '$item->image'
 	     >
  	    </slides>

What am I missing? Where should I put the iteration:

 @foreach($data3 as $item)

Slides.vue

<template>
<div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-12" >
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
          
          @foreach($data3 as $item)

            @if($loop->first)
            <div class="item active">
              <img src="{{ url(Storage::url(this.props_slides_image_path)) }}" alt="Los Angeles">
              <div class="carousel-caption">
                <h3>{{ this.props_slides_title }}</h3>
              </div>
            </div>
            @endif

            @if(!($loop->first))
            <div class="item">
              <img src="{{ url(Storage::url(this.props_slides_image_path)) }}" alt="Los Angeles">
              <div class="carousel-caption">
                <h3>{{ this.props_slides_title }}</h3>
              </div>
            </div>
            @endif
            
          @endforeach
          </div>



          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span><i class="fa fa-angle-left"></i></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span><i class="fa fa-angle-right"></i></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>

    <br />

    <div class="row">
      <div class="col-md-6 col-xs-6">
        <a class="pull-left" href="{{ url('frontend/aws proposal.pdf') }}"><img class="img-responsive" style="height: 60px" src="{{ url('frontend/images/download-now.jpg') }}"></a>
      </div>

      <div class="col-md-2 col-md-offset-4 col-xs-5 col-xs-offset-1">
        <a class="pull-right" href="{{ url('f_contact') }}"><img class="img-responsive" style="height: 80px" src="{{ url('frontend/images/free-quotes.png') }}"></a>
      </div>
    </div>

    <div class="row">
      <div class="icons-area text-center">
        <img class="img-responsive" src="{{ url('frontend/images/icons.jpg') }}" alt="AWS">
      </div>
    </div>
  </div>
 </template>

<script>
import axios from 'axios'

export default {
    name: 'WishlistButton',
    props: {
        props_slides_title: null,
        props_slides_image_path: null,
    },

app.js

import Vue from 'vue'
import SuiVue from 'semantic-ui-vue'
import axios from 'axios'
import numeral from 'numeral-es6'
import Autocomplete from 'vuejs-auto-complete'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(SuiVue)
Vue.use(VueContentPlaceholders)

Vue.component('axios', axios);
Vue.component('slides', require('./components/Slides.vue').default);

Okay this is my my:

webpack.config.js

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
*/
let mix = require('../src/index');

let ComponentFactory = require('../src/components/ComponentFactory');

new ComponentFactory().installAll();

require(Mix.paths.mix());

/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/

Mix.dispatch('init', Mix);

/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/

let WebpackConfig = require('../src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

There is no app.js in it.

I normally have to run: npm install -g vue-cli

to create vue files.

I found this file on an ecommerce for component registration. I wonder if there is any reference to create this whole scripts? I don't know what are all the neccessary scripts for component registration?

This is the only reference I found: ref: https://vuejs.org/v2/guide/components-registration.html

app.js

import Vue from 'vue'
import SuiVue from 'semantic-ui-vue'
import axios from 'axios'
import numeral from 'numeral-es6'
import Autocomplete from 'vuejs-auto-complete'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(SuiVue)
Vue.use(VueContentPlaceholders)

// Carts
Vue.component('cart-total-price', require('./components/carts/TotalPrice').default);
Vue.component('cart-button-global', require('./components/carts/buttons/Global').default);
Vue.component('cart-button-wishlist', require('./components/carts/buttons/Wishlist').default);

Vue.component('cart-select-maturities', require('./components/carts/SelectMaturities').default);
Vue.component('cart-select-variants', require('./components/carts/SelectVariants').default);
Vue.component('cart-detail-action-button-wrapper', require('./components/carts/DetailActionButtonWrapper').default);

// MasterData
Vue.component('master-nutrition', require('./components/master/MasterNutrition').default);
Vue.component('master-benefit', require('./components/master/MasterBenefit').default);
Vue.component('master-format', require('./components/master/MasterFormat').default);

Object.defineProperty(Vue.prototype, '$bus', {
		get() {
    		return this.$root.bus;
		}
});

window.bus = new Vue();

window.axios = axios;
window.numeral = numeral;

Vue.prototype.$axios = window.axios;
Vue.prototype.$numeral = window.numeral;

window.Vue = Vue

window.app = new Vue({
		el: '#app',
		data: {
    	bus: bus // Here we bind our event bus to our $root Vue model.
		}
});

I also wonder where is the main.js that I normally created when building vue files?

This program actually works.

Servers.vue

<template>
	<div class="col-xs-12 col-sm-6">
    <ul class="list-group">
        <app-server
            v-for="server in servers"
            :server="server"></app-server>
    </ul>
	</div>
</template>

<script>
	import Server from './Server.vue';

export default {
    data: function() {
        return {
          servers: [
              { id: 1, status: 'Normal'},
              { id: 2, status: 'Critical'},
              { id: 3, status: 'Unknown'},
              { id: 4, status: 'Normal'}
          ]
        };
    },
    components: {
        appServer: Server
    }
	}
</script>

<style>

</style>

I wonder if appServer is equal to ?

How to set up the task scheduler? Using cron job?

Hello,

I would like to send automated email every 1 month since the determine time. Every month the user should receive a billing statement. How to do so?

I found the answer:

methods: {
destroy: function(){
  this.$destroy();
}

I found the answer:

methods: {
destroy: function(){
  this.$destroy();
}

app.js

new Vue({
  el: '#app',
  data: {
    title: 'The VueJS Instance'
},
beforeCreate: function(){
  console.log('beforeCreate()');
},
created: function(){
 console.log('created()');
},
 beforeMount: function(){
	console.log('beforeMount()');
},
mounted: function(){
	console.log('mounted()');
 },
beforeUpdate: function(){
	console.log('beforeUpdate()');
},
updated: function(){
	console.log('updated()');
},
beforeDestroy: function(){
	console.log('beforeDestroy()');
},
destroyed: function(){
	console.log('destroyed()');
},
methods: function(){
	destroy: function(){
  	this.$destroy();
 }
}
});

index.html

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<meta charset="UTF-8">

<div id="app">
	<h1>{{ title }}</h1>
	<button @click="title = 'Changed'">Update Title</button>
	<button @click="destroy">Destroy</button>
</div>

<script src="app.js"></script>

This time, I also confuse why I title still appear as {{ title }}. I have the app reference correctly:

index.html

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app1">
<h1 ref="heading">{{ title }}</h1>
<button v-on:click="show">Show Paragraph</button>
<p v-if="showParagraph">This is not always visible</p>
</div>

<div id="app2">
<h1 ref="heading">{{ title }}</h1>
<button v-on:click="show">Show Paragraph</button>
<p v-if="showParagraph">This is not always visible</p>
</div>

<script src="app.js"></script>

app.js

new Vue({
el: '#app',
data: {
  title: 'The VueJS Instance',
  showParagraph: false
 },
 methods: {
  show: function() {
     this.showParagraph = true;
     this.updateTitle('The VueJS Instance (Updated)');
  },
  updateTitle: function(title) {
     this.title = title;
  }
},
computed: {
  lowercaseTitle: function() {
    return this.title.toLowerCase();
  }
},

watch: { title: function(value) { alert('Title changed, new value: ' + value); } } });

new Vue({ el: '#app2', data: { title: 'The second Instance' }, methods: { show: function() { this.showParagraph = true; this.updateTitle('The VueJS Instance (Updated)'); }, updateTitle: function(title) { this.title = title; } } });

The result of this code:

{{ title }}

This is not always visible

The second Instance

I wonder why the first one appears as : {{ title }} ?

app.js

methods: {
	startGame: function(){
		vm = this;
		vm.playerHealth = 100;
		vm.monsterHealth = 100;
		vm.gameIsRunning = true;
	},
	attack: function(){
		vm = this;
		vm.monsterHealth -= Math.floor(Math.random() * 10);

		if (vm.monsterHealth <= 0) {
			alert('You won!');
			vm.gameIsRunning = false;
			return;
		}

		vm.playerHealth -= Math.floor(Math.random() * 10);		

		if (vm.playerHealth <= 0) {
			alert('You lost!');
			vm.gameIsRunning = false;
			return;		
		}
	},

I also wonder why the alert does not pop up eventhough I lost and win the game?

I thought when I mention either v-bind:class="healthbar" or v-bind:style="healthbar" it would call healthbar in vue data.

This also does not show me anything:

<div v-bind:class="healthbar" v-bind:style="width: 10%; height: 40px; background-color: green;"></div>

What is the difference between the two?

ref: https://vuejs.org/v2/guide/class-and-style.html

index.html

<div class="small-6 columns">
        <h1 class="text-center">YOU</h1>
        <div class="healthbar">
            <div class="healthbar text-center" style="background-color: green; margin: 0; color: white;">

            </div>

            <div v-bind:class="healthbar" v-bind:style="healthbar"></div>
        </div>
    </div>

app.js

new Vue({
el: "#app",
data: {
	healthbar: {
		width: '10%',
		height: '40px',
		background-color: '#eee',
		margin: 'auto',
		transition: 'width 500ms',
	},		
},
methods: {
	
}
})

app.css

.healthbar {
		width: 80%;
		height: 40px;
		background-color: #eee;
		margin: auto;
		transition: width 500ms;
}

The result of this code is there is this health bar which is around 80% in green color. I would like to control the healthbar, start with 10%. How to create such a thing? (using vue)

I thought this line of code will result something:

<div v-bind:class="healthbar" v-bind:style="healthbar"></div>

index.html

<!-- 4) Print the following object (only the values) and also create a nested loop for the array: {name: 'TESTOBJECT', data: [1.67, 1.33, 0.98, 2.21]} (hint: use v-for and v-if to achieve this) -->
 <ul>
<li v-for="value in testData">
  <template v-if="Array.isArray(value)">
    <div v-for="element in value">{‌{ element }}</div>
  </template>
  <template v-else>
    {‌{ value }}
  </template>
</li>

app.js

new Vue({
 el: '#exercise',
data: {
show: true,
array: ['Max', 'Anna', 'Chris', 'Manu'],
myObject: {
  title: 'Lord of the Rings',
  author: 'J.R.R. Tolkiens',
  books: '3'
},
testData: {
  name: 'TESTOBJECT', 
  id: 10,
  data: [1.67, 1.33, 0.98, 2.21]
}
}

});

Please help me figure out why I get these results:

 {‌{ value }}
{‌{ value }}
{‌{ element }}
{‌{ element }}
{‌{ element }}
{‌{ element }}

It suppose to be like these:

TESTOBJECT
10
1.67
1.33
0.98
2.21

Any idea why?

I don't understand this error: SyntaxError: export declarations may only appear at top level of a module

export default{

Any clue why?

I wonder why it still does not works.

index2.html

<html>

<body>
<div>
		<div class="demo" :class="color" :style="{'width': width +'px'}"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">
</div>

<script>
export default{
	data(){
		return{
			color: "gray",
			width: 100
		};
	}
}
</script>

<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;	
margin: 10px;
}

.purple{
		background-color: purple;
}
.red {
	background-color: red;
}

.green {
	background-color: green;
}

.blue {
	background-color: blue;
}

.gray {
	background-color: gray;
}
</style>

</body>
</html>

I did. I enter red and 50 in the input box and it does not changes the property.

That also does not work. Have you tested your code?

I copy paste into a new file and it does not works.

It does not works.

index.html

<!-- Put this in the HTML section in JSFiddle! -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style.css">

<div id="app">
<div class="demo" :style="{backgroundColor: color}"></div>
<div class="demo" :style="myStyle"></div>
<div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">

</div>

<script src="app.js"></script>

app.js

new Vue({
el: '#app',
data: {
	color: 'gray',
	width: 100
},
computed: {
	myStyle: function(){
		return {
			backgroundColor: this.color,
			width: this.width + 'px';
		};
	}
}
})

style.css

.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}

.red {
background-color: red;
}

.green {
background-color: green;
}

.blue {
background-color: blue;
}

.gray {
background-color: gray;
}

I expected when I input the color and the width, the next three boxes will changes their colors. Yet, it does not work. Any clue why?

Anyone ever heard of kafka & RabbitMQ what are they for?

ref: https://kafka.apache.org/intro

https://www.rabbitmq.com/

What is the difference with normal apache?

index.html

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js">	</script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="box.js"></script>

</head>

<body>

<div id="p1">
</div>
<div id="p2">
</div>


</body>
</html>

box.js

function Person(props){
	return (
  			<div className="person">
  			<h1>{ props.name }</h1>
  			<p>Your Age: { props.age }</p>
  			</div>
	);

}

ReactDOM.render(<Person name="Max" age="28"/>, document.querySelector('#p1'));

ReactDOM.render(<Person name="Manu" age="29"/>, document.querySelector('#p2'));

style.css

.person{
margin: 10px;
display: inline-block;
border: 1px solid #eee;
box-shadow: 0 2px 2px #ccc;
width: 200px;
padding: 20px;

}

I checked the console and get this highlighted: SyntaxError: expected expression, got '<'

it is this line:

<div className="person"> 

in box.js

Anyone knows why I get a blank white screen when I tested this code? It works in codepen.io

ref: https://www.w3schools.com/REACT/default.asp

index.html

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="http://localhost/React/intro/box.js"></script>
<link rel="stylesheet" href="http://localhost/React/intro/style.css">
</head>

<body>

<div id="p1">
</div>
<div id="p2">
</div>


</body>
</html>

box.js

<script>

function Person(props){
return (
  		<div className="person">
  		<h1>{ props.name }</h1>
  		<p>Your Age: { props.age }</p>
  		</div>
);

}

ReactDOM.render(<Person name="Max" age="28"/>, document.querySelector('#p1'));

ReactDOM.render(<Person name="Manu" age="29"/>, document.querySelector('#p2'));

</script>

style.css

.person{
	margin: 10px;
	display: inline-block;
	border: 1px solid #eee;
	box-shadow: 0 2px 2px #ccc;
	width: 200px;
	padding: 20px;

}

It only reads this part if I inspect element.

$.get('/cpages/orders/check_coupon_code', {
    	coupon_code: coupon_code,
    	total: total
  	})

alert("456") also does not pop up.

I think I should brush up my js skill. I rarely use them, except for reading someone else codes.

.done(function(data) {
    if (isNaN(data) != true) {
      alert("123");
      $("#original_coupon").val(coupon_code);
      var discount = parseInt(data);
      total = total - discount;
      $("#CDisc").text("Rp. -" + data);
      $("#total-checkout").text(total);
      $("#total").val(total);
      $("#discount-int").val(data);
      $("#btn_reset_coupon").toggle();
      $("#btn_apply_coupon").toggle();
      $('#coupon_code').prop('readonly', true);
      $('#realcoupon_code').val($('#coupon_code').val());
    } else {
      alert(data);
      alert("456");
      clearDiscount();
    }

Now, I wonder why alert("123"); does not pop up. and it seems like it does not read .done part.

checkout.blade.php

function checkCoupon (total) {

var check = $("#original_coupon").val();
var coupon_code = $("#coupon_code").val();
if(check != coupon_code) {
	$.get('/cpages/orders/check_coupon_code', {
    	coupon_code: coupon_code,
    	total: total
  	})
  .done(function(data) {
    if (isNaN(data) != true) {
      $("#original_coupon").val(coupon_code);
      var discount = parseInt(data);
      total = total - discount;
      $("#discount").text("Rp. -" + data);
      $("#total-checkout").text(total);
      $("#total").val(total);
      $("#discount-int").val(data);
      $("#btn_reset_coupon").toggle();
      $("#btn_apply_coupon").toggle();
      $('#coupon_code').prop('readonly', true);
      $('#realcoupon_code').val($('#coupon_code').val());
    } else {
      alert(data);
      clearDiscount();
    }
  });

} else { alert('Kupon sudah digunakan'); } }

This is code for coupon_code function:

CouponsController.php

public function check_coupon_code()
	{

    // return json_encode(request('coupon_code'));

    $coupon = Coupons::where('coupon_code', request('coupon_code'))->first();
    if ($coupon == null) {
        echo "Kupon tidak ditemukan";
    } else {
        if ($coupon->coupon_minimum_cost < request('total')) {
            return $coupon->coupon_discount;
        } else {
            echo "Kupon tidak sesuai dengan minimum pembelian. Total:". request('total'). "| Minimum:". $coupon->coupon_minimum_cost;
        }
    }
   }

My question is if I get this value for check_coupon_code() :

return $coupon->coupon_discount;

How to capture the value in function checkCoupon (total) ? It suppose to return the coupon_discount value to checkCoupon function right?

I still wonder why I get this message: "Kupon tidak ditemukan" which means "Coupon is not found"

CouponsController.php

 public function check_coupon_code()
	{

    // return json_encode(request('coupon_code'));

    $coupon = Coupons::where('coupon_code', request('coupon_code'))->first();
    if ($coupon == null) {
        echo "Kupon tidak ditemukan";
    } else {
        if ($coupon->coupon_minimum_cost < request('total')) {
            return $coupon->coupon_discount;
        } else {
            echo "Kupon tidak sesuai dengan minimum pembelian. Total:". request('total'). "| Minimum:". $coupon->coupon_minimum_cost;
        }
    }
	}

The coupon does exist.

I wonder if this: request('coupon_code') contains the correct coupon code that I typed?

checkout.blade.php

function checkCoupon (total) {
var check = $("#original_coupon").val();
var coupon_code = $("#coupon_code").val();
if(check != coupon_code) {
		$.get('/cpages/orders/check_coupon_code', {
    		coupon_code: coupon_code,
    		total: total
  		})
  	.done(function(data) {
    if (isNaN(data) != true) {
      	$("#original_coupon").val(coupon_code);
      	var discount = parseInt(data);
      	total = total - discount;
      	$("#discount").text("Rp. -" + data);
      	$("#total-checkout").text(total);
      	$("#total").val(total);
      	$("#discount-int").val(data);
      	$("#btn_reset_coupon").toggle();
      	$("#btn_apply_coupon").toggle();
      	$('#coupon_code').prop('readonly', true);
      	$('#realcoupon_code').val($('#coupon_code').val());
    	} else {
      alert(data);
      clearDiscount();
      }
  	});
} else {
		alert('Kupon sudah digunakan');
 }

}

CouponsController.php

public function check_coupon_code()
	{

dd(request('coupon_code'));

    $coupon = Coupons::where('coupon_code', request('coupon_code'))->first();
    if ($coupon == null) {
        echo "Kupon tidak ditemukan";
    } else {
        if ($coupon->coupon_minimum_cost < request('total')) {
            return $coupon->coupon_discount;
        } else {
            echo "Kupon tidak sesuai dengan minimum pembelian. Total:". request('total'). "| Minimum:". $coupon->coupon_minimum_cost;
        }
    }
}

the result of : dd(request('coupon_code'));

Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0

I would like to ask:

I heard that creating blog posts could increase your seo, how to register your article so that it could increase your seo rank in search enginee ?

ref: https://www.quicksprout.com/seo-for-blog/

Is filling meta title and meta description is enough. If so then, it will be one meta title and meta description per page correct?

CartController.php

 public function store(Request $request)
{
    $this->validate($request, [
      'prod_id' => 'required|numeric',
      'amount' => 'required|numeric|min:1',
      'prod_type' => 'nullable'
    ]);

    $exist = Cart::where('prod_id', request('prod_id'))->where('prod_type', request('prod_type'))->where('user_id', auth()->user()->user_id)->first();

    if (empty($exist)) {
        if (Products::checkStockAvailability(request('prod_id'), request('amount'))) {
            Cart::create([
            'user_id' => auth()->user()->user_id,
            'prod_id' => request('prod_id'),
            'amount' => request('amount'),
            'prod_type' => request('prod_type'),
          ]);
        } else {
            flash('Pembelian melebihi jumlah stock yang tersedia')->error();
            return back();
        }
    } else {
        if (Products::checkStockAvailability(request('prod_id'), request('amount') + $exist->amount)) {
            Cart::where('cart_id', $exist->cart_id)->update([
              'amount' => $exist->amount + request('amount')
            ]);
        } else {
            flash('Pembelian melebihi jumlah stock yang tersedia')->error();
            return back();
        }
    }

    flash('Product dimasukkan ke dalam keranjang belanja');

    return back();
}

Then, it must be this one. Only request being passed.

I think I see some light. The add product only works through product details since you have select the t-shirt size. It does not work through the frontpage for some reason. since you only know the product_id and not the product_type (small, medium, large, x-large).

Any idea how to solve this problems?

Someone mentioned to create a pop up when you click the product picture asking to fill in the t-shirt size. How to create pop up like this?

What do you mean by: the binding from the URL is used ?

I see that there is this url when you want to add to the product to cart: http://localhost/victoryeshop/public/cart/add/3

Then, my route is:

web.php

Route::post('/cart/add', '[email protected]');

and I get this error:

(1/1) NotFoundHttpException

My onlineshop has a bug.

CartController.php

public function add(Cart $cart)
	{
    if (Products::checkStockAvailability($cart->prod_id, $cart->amount + 1)) {
        Cart::where('cart_id', $cart->cart_id)->update([
          'amount' => $cart->amount + 1
        ]);
    } else {
        flash('Pembelian melebihi jumlah stock yang tersedia')->error();
        return back();
    }

    return back();
	}

I also cannot understand what this means: add(Cart $cart) ?

Is it the same like $cart = new Cart; ?

okay, I also confuse about this one:

request()->request->add([
      'user_id' => auth()->user()->user_id,
      'order_total_unit' => $order_total_unit,
      'order_total_weight' => $order_total_weight,
      'order_total_cost' => $order_total_cost,
      'prod_id' => $product_info['prod_id'],
      'prod_unit' => $product_info['prod_unit'],
      'prod_type' => $product_info['prod_type'],
      'order_status' => 0,
      'order_coupon_id' => $coupon_id,
    ]);

adding these data to where? This ecommerce site already works (I don't know who build it - I paid someone to built it, yet I am sure there is another person who contribute a lot buiding the site that I didn't recognize), I just want to study the logic so that I can build another one.

This is the question: I wonder why the first one using $.post ?

Is it the right way to use post?

checkout.blade.php

function checkOngkir(kota_id, kota_tujuan_id, weight) {
	$.post('/cpages/ongkir/harga_checkout', {
  			kota_id: kota_id,
  			kota_tujuan_id: kota_tujuan_id,
  			weight: weight,
  			_token: $('meta[name=csrf-token]').attr('content')
		})
...
}

function getKota() {
	$("#order_province-placeholder").remove();
	$("#order_city_destination").prop("disabled", true);
	$("#order_city_destination").html("<option>Loading...</option>");

	var kota_id = $("#order_province").val();
	var url = 'cpages/ongkir/kota';

  	$.get(url, {
  			kota_id: kota_id
		})
...

}

I wonder why the first one using $.post, checkOngkir means getting shipping cost. It is showing another dropdown for shipping cost.

and the second one using $.get, getKota means getting the city name after selecting the province. I think this one is quite obvious.

I just put the reference on my first post. Maybe it just the way it is.

I think whenever I write label inside that bracket is being sensored by the forum.

I just put the reference on my first post. Maybe it just the way it is.

I think whenever I write label inside that bracket is being sensored by the forum.

Hello,

I wonder why:

registration.blade.php

<div class="form-group">	
	<label>Nama</label>
	<input type="text" class="form-control" name="nama">
</div>

label only syntax (without div) could turn into css for name ?

I thought you have to use

ref: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

Also for this function:

function checkOngkir(kota_id, kota_tujuan_id, weight) {
$.post('/cpages/ongkir/harga_checkout', {
  		kota_id: kota_id,
  		kota_tujuan_id: kota_tujuan_id,
  		weight: weight,
  		_token: $('meta[name=csrf-token]').attr('content')
 })
	.done(function(data) {
  	$("#shipping-info-area").html(data);
		}).fail(function(xhr, status, error) {
  			console.log(xhr);
  			console.log(status);
  			console.log(error);
	});
}

</script>

Whatever returned in this url: /cpages/ongkir/harga_checkout

will stored in data correct?

views/store/checkout/cost.blade.php

@if($cost != null)
@foreach($cost as $item)
  <input type="hidden" id="{{$item->service}}" value="{{ $item->cost[0]->value }}" />
@endforeach
<select id="order_shipping_type" name="order_shipping_type" class="order_shipping_type">
  <option id="order_shipping_type_placeholder" value="">Silahkan Pilih Jenis Pengiriman</option>
  @foreach($cost as $item)
    <option value="{{$item->service}}">
      [{{$item->service}}] Rp.{{ number_format($item->cost[0]->value) }} (Estimasi Sampai: {{ $item->cost[0]->etd }} hari)
    </option>
  	@endforeach
	</select>
@else
<h3>Tidak ada informasi ongkir di kabupaten/kota ini. Silahkan gunakan daerah yang lain.</h3>
@endif

<script>
$(document).ready(function() {
	$('.order_shipping_type').on('change', function() {
		$("#order_shipping_type_placeholder").remove();
		var metode = $(this).val();
		$("#ongkir-cost").text("Rp. " + $("#"+metode).val());
		$("#total-checkout").text("Rp. " + (parseInt($("#"+metode).val()) + parseInt($("#subtotal").val())));
	$("#total").val(parseInt($("#"+metode).val()) + parseInt($("#subtotal").val()));

		$("#coupon_code").val(null);
		$("#original_coupon").text(null);
		$("#discount").text("-");
});
});
</script>

Where does this comes from: var metode = $(this).val(); ?

Is it from: {{$item->service}} ?

I read the doc and still do not understand where does this comes from:

trigger('chosen:updated');

? I mean I search my whole page for chosen:updated and cannot find it.

checkout.blade.php

function getKota() {
   $("#order_province-placeholder").remove();
   $("#order_city_destination").prop("disabled", true);
   $("#order_city_destination").html("<option>Loading...</option>");

var kota_id = $("#order_province").val();
var url = 'cpages/ongkir/kota';

 $.get(url, {
  kota_id: kota_id
})
.done(function(data) {

  $("#order_city_destination").removeAttr("disabled");
  $("#order_city_destination").html(data);
  $("#order_city_destination").val(id_kota).trigger('chosen:updated');
});

}

Hello, I cannot understand this javascript function. First, where does data comes from?

.done(function(data) {

also, what does this means:

trigger('chosen:updated');

Illuminate\Contracts\Filesystem\FileNotFoundException app/public

still not found

That part works. I have to use a live image not from the local one. I checked the email from yahoo and it cannot read my local image I guess.

Now,

Illuminate\Contracts\Filesystem\FileNotFoundException /storage/app/public

I want to test attaching pdf file to my email:

public function build()
	{
    return $this
        ->subject('Web Promo')
        ->markdown('mail.webpromo')
        ->attachFromStorage('/storage/app/public', 'Promotional%20Brosure.pdf

', [ 'mime' => 'application/pdf' ]); }

I have the file in storage/app/public/Promotional Brosure.pdf

Why the error appears?

message.blade.php

@component('mail::layout')
{{-- Header --}}
@slot('header')	
@component('mail::header', ['url' => config('app.url')])

<img src="{{ asset('images/marketing_banner.jpg') }}" class="logo" alt="Marketing Banner">

{{ config('app.name') }}
@endcomponent
@endslot

It still does not do any good. The banner won't show up.

I change it to this:

<tr>
<td class="header">
<a href="{{ $url }}" style="display: inline-block;">
@if (trim($slot) === 'Laravel')
<img src="{{ asset('images/marketing_banner.jpg') }}" class="logo" alt="Laravel Logo">
@else
{{ $slot }}
@endif
</a>
</td>
</tr>

What is $url ? Is it from: APP_URL=http://localhost/marketing ?

Also, now I only see the text Laravel Logo instead of showing the banner.

I have public\images\marketing_banner.jpg file.

ref: https://laravel.com/docs/7.x/mail#writing-markdown-messages

Queueing A Mail Message

Since sending email messages can drastically lengthen the response time of your application, many developers choose to queue email messages for background sending. Laravel makes this easy using its built-in unified queue API. To queue a mail message, use the queue method on the Mail facade after specifying the message's recipients:

I don't really understand this why using queue for sending email message?

When do we have to use queue?

Also in here:

$when = now()->addMinutes(10);

Mail::to($request->user()) ->cc($moreUsers) ->bcc($evenMoreUsers) ->later($when, new OrderShipped($order));

You can delay the email sent message to the customize time. When do we need this feature? Any example?

WebPromoMail.php

 public function build()
 {
    return $this
        ->subject('Web Promo')
        ->markdown('mail.webpromo');
 }

webpromo.blade.php

@component('mail::message')

<h2>Web Promo</h2>

<br><br>

<p>Hello, customer</p>

<p>I would like to show this website that might be useful for you.</p>

@component('mail::button', ['url' => url('login')])
Cek our website!
@endcomponent

Thanks,<br>
{{ config('app.name') }}

@endcomponent

Using this email template I get this email:

https://drive.google.com/file/d/1tFQm-gfN92LXjVlZjqhUAIwiiA6dClWU/view?usp=sharing

Cek the top header - there is this strange logo. How to customize it?

I see my other online shop that someone else built it, it has a text written the name of the online shop which is clickable and it will carries you to the online shop website if you click it?

Also on the bottom of the email there is this strange footer - © 2020 Laravel. All rights reserved.

Any clue how to customize it?