davy_yg

I would like to show the first 30 letters.

This would show the whole contents:

{!! $about->perusahaan !!}

Any idea how to?

ref: https://www.w3schools.com/php/func_string_substr.asp

I finally find the solution.

by searching for sendmail.php and comment out the whole ajax script that contains that words.

It still does not work eventhough I take off that class.

<p class="col-md-6"><input type="submit" value="Kirim Pesan"></p><!-- class="wpcf7-form-control wpcf7-submit"  -->

I checked console.

POSThttp://localhost/masterlink_web_laravel/public/sendmail.php [HTTP/1.0 404 Not Found 130ms]

Nothing happened.

When I hover over the submit button, the cusor turn into a hand.

And when I press clicked, nothing happened.

I wonder why when I click the submit button nothing happened.

kontak.blade.php

 <div role="form" class="wpcf7" id="wpcf7-f182-p19-o1" lang="en-US" dir="ltr">
                                <div class="screen-reader-response"></div>
                                <form action="{{ url('sendcontactfooter') }}" method="POST" class="wpcf7-form" novalidate="novalidate">
                                   <div style="display: none;">
                                      <input type="hidden" name="_wpcf7" value="182" />
                                      <input type="hidden" name="_wpcf7_version" value="4.3.1" />
                                      <input type="hidden" name="_wpcf7_locale" value="en_US" />
                                      <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f182-p19-o1" />
                                      <input type="hidden" name="_wpnonce" value="1d73f3e5f9" />
                                      @csrf
                                   </div>
                                   <div class="row">
                                      <p class="col-md-6">
                                         <span class="wpcf7-form-control-wrap name"><input type="text" name="nama" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Nama *" /></span> 
                                      </p>
                                      <p class="col-md-6">
                                         <span class="wpcf7-form-control-wrap email"><input type="text" name="email" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Email *" /></span>
                                      </p>
                                   </div>
                                   <div class="row">
                                      <p class="col-md-12">
                                         <span class="wpcf7-form-control-wrap subject"><input type="text" name="judul" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Judul *" /></span> 
                                      </p>
                                   </div>
                                   <div class="row">
                                      <p class="col-md-12">
                                         <span class="wpcf7-form-control-wrap message"><textarea name="pesan" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Pesan *"></textarea></span> 
                                      </p>
                                   </div>
                                   <div class="row">
                                      <p class="col-md-6 captcha_test">
                                         <input type="hidden" name="_wpcf7_captcha_challenge_captcha-937" value="2088610286" /><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-937" width="84" height="28" alt="captcha" src="#" /><br />
                                         <span class="wpcf7-form-control-wrap captcha-937"><input type="text" name="captcha-937" size="40" class="wpcf7-form-control wpcf7-captchar" aria-invalid="false" placeholder="Masukan Captcha *" /></span>
                                      </p>
                                      <p class="col-md-6"><input type="submit" value="Kirim Pesan" class="wpcf7-form-control wpcf7-submit" /></p>
                                   </div>
                                   <div class="wpcf7-response-output wpcf7-display-none"></div>
                                </form>
                             </div>

web.php

Route::post('sendcontactfooter', '[email protected]');

FrontContactController.php

	public function sendcontactfooter(Request $request)
	{

	Mail::to('[email protected]')
		->send(new ContactMailFooter($request->all()));

	Session::flash('flash', 'Sukses mengirim pesan');

	return redirect()->back();		
	}

ContactMailFooter.php

	<?php

	namespace App\Mail;

	use Illuminate\Bus\Queueable;
	use Illuminate\Contracts\Queue\ShouldQueue;
	use Illuminate\Mail\Mailable;
	use Illuminate\Queue\SerializesModels;

	class ContactMailFooter extends Mailable
	{
		use Queueable, SerializesModels;

		/**
 		* Create a new message instance.
	 	*
	 	* @return void
	 	*/

	public function __construct($data = [])
		{
    	//
    	$this->data['nama'] = $data['nama'];
    	$this->data['email'] = $data['email'];
    	$this->data['judul'] = $data['judul'];
    	$this->data['pesan'] = $data['pesan'];
		}

 	/**
 		* Build the message.
 		*
	 	* @return $this
	 	*/

	public function build()
		{
    	return $this->subject('Pesan Anda')
                ->view('mail.contactfooter', $this->data);
		}
	}

PageController.php

public function home()
{
	$port = Portfolio::latest()->limit(8)->get();

	// dd($port);

	return view('pages.index')->with('list', $port);
}

index.blade.php

<div class="esg-entry-media"><img src="{{ url(Storage::url($list->gambar)) }}" alt=""></div>

Property [gambar] does not exist on this collection instance. (View: E:\xampp72\htdocs\masterlink_web_laravel\resources\views\pages\index.blade.php)

In Portfolio tables there is "gambar" which means picture.

This only shows one item:

$port = Portfolio::latest()->first();

I want to show the first 8 pictures of portfolio in the view.

I tried this:

$port = Portfolio::all();

Still get this error message:

Property [gambar] does not exist on this collection instance. (View: E:\xampp72\htdocs\masterlink_web_laravel\resources\views\pages\index.blade.php)

For some reason I do not understand the following error:

Facade\Ignition\Exceptions\ViewException Property [gambar] does not exist on the Eloquent builder instance. (View: E:\xampp72\htdocs\masterlink_web_laravel\resources\views\pages\index.blade.php)

ref: https://stackoverflow.com/questions/54906252/laravel-property-title-does-not-exist-on-the-eloquent-builder-instance

PageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Portfolio;


class PageController extends Controller
{
	//

public function home()
{
	$port = Portfolio::latest(8);

	// dd($port);

	return view('pages.index')->with('list', $port);
}

index.blade.php

<div class="esg-entry-media"><img src="{{ url(Storage::url($list->gambar)) }}" alt=""></div>

I still get the same error message:

(1/1) TokenMismatchException

in VerifyCsrfToken.php (line 68)

For some reason this does not work out:

<form action="{{ url('/checkout') }}" method="POST" id="myForm">
            <meta name="csrf-token" content="{{ csrf_token() }}">
            @csrf

Hello,

I got this error:

(1/1) TokenMismatchException

in VerifyCsrfToken.php (line 68)

ref: https://laracasts.com/discuss/channels/laravel/tokenmismatchexception-in-verifycsrftokenphp-line-68-in-laravel-54

checkout.blade.php

<form action="{{ url('/checkout') }}" method="POST" id="myForm">
    	        {{ csrf_field() }}

        		<div class="checkout-page">
            		<div class="row">
                		<div class="col-sm-12 col-md-6">
                    		<div class="form">
	                            <h3 class="form-title">DELIVERY DETAILS</h3>

....


<div class="paymment-method">
                        <h3 class="form-title">PAYMENT METHOD</h3>
                        
                        <div class="checkbox">
                            <label>
                            <input type="checkbox" value="">
                            I’VE READ AND ACCEPT THE TERM & CONDITIONS
                            </label>
                        </div>
                    </div>
                    <button type="submit" class="button pull-right">Checkout</button>
                </div>
            </div>
        </div>
    </form>

Any clue why?

Someone finally help me out by letting me using the standard version of ckeditor:

<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>

@push('script')

<script>
   
 CKEDITOR.replace( 'isi' );

	$(document).ready(function(){

  	setTimeout(function(){
    	$('#flash').fadeOut('fast')
  	}, 3000);
	});

 </script>

@endpush

Someone finally help me out by letting me using the standard version of ckeditor:

<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>

@push('script')

<script>
   
 CKEDITOR.replace( 'isi' );

	$(document).ready(function(){

  	setTimeout(function(){
    	$('#flash').fadeOut('fast')
  	}, 3000);
	});

 </script>

@endpush

It does not work either with the save method. Nothing happened!

The update method works without the ckeditor. It must be how I capture the data with ckeditor is the issue.

I wonder what is the correct way to do so?

Hello, I am trying to update content using the latest ckeditor.

ref: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html

Nothing happened when I pressed save button. I wonder why?

AboutController.php

public function update(Request $request, $id)
	{
    //
    $this->validate($request, [
        'sejarah' => 'required',
        'misi' => 'required',
        'visi' => 'required'
    ]);

    $about = About::find($id);

    $about->sejarah = $request->sejarah;
    $about->misi = $request->misi;
    $about->visi = $request->visi;
    $about->update();

    Session::flash('flash', 'Sukses mengupdate data');

    return redirect()->back();
	}

about.blade.php

	    <br>
	@include('layout.flash')   
	@include('layout.error')

	<!-- Main content -->
	<section class="content">
  <br>
    <form method="post" action="{{ route('about.update', $list->id) }}" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
    <input type="hidden" name="id" value="{{ $list->id }}"/>
    <input type="hidden" name="_method" value="PUT">
  <br>
  <table width="800">
       @csrf       
      <div class="form-group">
          <label>Sejarah Perusahaan</label>
          <div id="editor">
          <textarea required size="50" class="form-control" name="ringkasan" name="sejarah" rows="10" cols="100">{{ $list->sejarah }}</textarea></div>
      </div>
      <div class="form-group">
          <label>Misi</label>
          <div id="editor2">
          <textarea required size="50" class="form-control" name="misi" rows="15" cols="100">{{ $list->misi }}</textarea></div>
      </div>
      <div class="form-group">
          <label>Visi</label>
          <div id="editor3">
          <textarea required size="50" class="form-control" name="visi" rows="15" cols="100">{{ $list->visi }}</textarea></div>
      </div>         
      <button type="submit" class="btn btn-primary">Save</button> 

  	</table>  
	</form>
  <!-- /.row -->

	</section>
	<!-- /.content -->
</div>
<!-- /.content-wrapper -->

@endsection

@push('script')

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );

    ClassicEditor
        .create( document.querySelector( '#editor2' ) )
        .catch( error => {
            console.error( error );
        } );

    ClassicEditor
        .create( document.querySelector( '#editor3' ) )
        .catch( error => {
            console.error( error );
        } );  	      
</script>

@endpush

It's on the same page. If I rename the modal underneath into $list2, then I get this error message:

Undefined variable: list2 (View: E:\xampp72\htdocs\masterlink_web_laravel\resources\views\admin\portfolio\portfolio.blade.php) 

PortfolioController.php

	public function index()
	{
    //
    $portfolio = Portfolio::all();

    return view('admin.portfolio.portfolio')->with('list', $portfolio);

	}

	/**
 	* Show the form for creating a new resource.
 	*
 	* @return \Illuminate\Http\Response
 	*/

public function create()
	{
    //
    return view('admin.portfolio.add_portfolio');
	}

	/**
 	* Store a newly created resource in storage.
 	*
 	* @param  \Illuminate\Http\Request  $request
 	* @return \Illuminate\Http\Response
 	*/

public function store(Request $request)
	{
    //
    $this->validate($request, [
        'gambar' => 'required',
        'judul' => 'required',
        'kategori' => 'required'
    ]);

    $port = new Portfolio;

    $path = $request->file('gambar')->store('public/portfolio');

    $port->gambar = $path;
    $port->judul = $request->judul;
    $port->kategori = $request->kategori;
    $port->save();

    Session::flash('flash', 'Sukses menyimpan data');

    return redirect()->back();

	}

	/**
 	* Display the specified resource.
	*
 	* @param  int  $id
 	* @return \Illuminate\Http\Response
 	*/

public function show($id)
{
    //
	}

	/**
 	* Show the form for editing the specified resource.
 	*
 	* @param  int  $id
 	* @return \Illuminate\Http\Response
 	*/

public function edit($id)
	{
    //
    $port =  Portfolio::find($id);

    // return view('admin.portfolio.edit_portfolio')->with('list2', $port);
    return view('admin.portfolio.portfolio')->with('list2', $port);

	}

See I am using modal to add and edit forms. The add modal works just fine. When I tried to create the edit modal form, then I have this error message. What should I do so that the edit modal form works just fine?

I cannot understand the logic.

PortfolioController.php

public function edit($id)
	{
    //
    $port =  Portfolio::find($id);

    return view('admin.portfolio.edit_portfolio')->with('list', $port);
	}

I even wonder if it reads the controller. I have list in the controller passed to the view if edit is pressed.

Hello I get this error to create edit using modal:

Property [id] does not exist on this collection instance.

ref: https://laracasts.com/discuss/channels/laravel/property-id-does-not-exist-on-this-collection-instance-2

<div class="table-responsive">
  <table class="table table-bordered" id="example" width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>No</th>
              <th>Gambar</th>
              <th>Judul</th>
              <th>Kategori</th>
              <th>Modify</th>
            </tr>
          </thead>                
          <tbody>
          @foreach($list as $item)  
          <tr>
            <td>1</td>
            <td>{{ $item->judul }}</td>
            <td><img src="{{ url(Storage::url($item->gambar)) }}" name="image" width="40%" height="40%"></td>
            <td>{{ $item->kategori }}</td>
            <td align="center">
                <form action="{{ route('portfolio.edit', $item->id) }}" method="GET">
                    @csrf
                    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Edit Portfolio</button>
                    <!-- <button type="submit" class="btn btn-primary"><i class="fa fa-edit"></i>&nbsp;Edit</button> -->
                </form>
                <form action="{{ route('portfolio.destroy', $item->id) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger"><i class="fa fa-remove"></i>&nbsp;Delete</button>
                </form>
            </td>
          </tr>
          @endforeach
          </tbody>     
  </table>
  </div>

...

<!-- Modal -->

<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">

	<!-- Modal content-->
	<div class="modal-content">
  	<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Portfolio</h4>
  </div>
  <div class="modal-body">

<br>
@include('layout.flash')   
@include('layout.error')

<!-- Main content -->
  <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header">
  	<h1>
    	Edit Service       
  	</h1>
  	<ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i>Dashboard</a></li>
    <li class="active">Edit Portfolio</li>
  </ol>
</section>

	<br>
	@include('layout.flash')   
	@include('layout.error')

	<!-- Main content -->
	<section class="content">
  	<br>
    <form method="post" action="{{ route('portfolio.update', $list->id) }}" enctype="multipart/form-data">
    	<input type="hidden" name="_token" value="{{ csrf_token() }}"/>
    <input type="hidden" name="id" value="{{ $list->id }}"/>
    <input type="hidden" name="_method" value="PUT">
  <br>
  <table width="800">
       @csrf       
      <div class="form-group">
          <label>Judul</label>
          <input type="text" class="form-control" name="judul" value="{{ $list->judul }}">
      </div>
      <div class="form-group">
          <label>Gambar<span style="color: #a09e9e;">&nbsp;&nbsp;&nbsp;&nbsp;<b>500px x 200px - 800px x 500px</b></span><br><br>
          <img src="{{ url(Storage::url($list->gambar)) }}" name="image" width="50%" height="50%">  
          </label>
          <input type="file" class="form-control" name="gambar">
      </div>
      <div class="form-group">
          <label>Ringkasan</label>
          <textarea required size="50" class="form-control" name="ringkasan" name="ringkasan" rows="10" cols="100">{{ $list->ringkasan }}</textarea>
      </div>
      <div class="form-group">
          <label>Isi</label>
          <textarea required size="50" class="form-control" name="isi" rows="15" cols="100">{{ $list->isi }}</textarea>
      </div>         
      <button type="submit" class="btn btn-primary">Submit</button> 

  </table>  
</form>
  <!-- /.row -->

</section>
<!-- /.content -->
</div>

<!-- /.content -->

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

Have any idea why the error appears?

It works!

I put these in order at the top:

admin_master.blade.php

<!-- buat modal -->
  <link rel="stylesheet" href="{{ asset('bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>

.

It works!

I put these in order at the top:

admin_master.blade.php

<!-- buat modal -->
  <link rel="stylesheet" href="{{ asset('bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>

.

https://paste.laravel.io/25e22092-8dff-483c-81bb-fe5570b14e27

there are two files: portfolio.blade.php and admin_master.blade.php

I am trying to create a modal form.

I copy paste exactly like this:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

the modal into my admin program.

Now, I wonder why the modal only opened for 1/2 seconds and closed again.

Any clue why?

Yes, there is this code with the same name that I already commented out, yet I think the program still reading it eventhough.

I still wonder why I get this error message:

The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE.

ref: https://laracasts.com/discuss/channels/laravel/the-post-method-is-not-supported-for-this-route-supported-methods-get-head

routes/web.php

Route::resource('service', 'ServiceController')->except(['show']);

add_service.blade.php

<section class="content">
  <br>
    <form action="{{ route('service.store') }}" method="post" enctype="multipart/form-data">
  <table width="800">
  @csrf       
      <div class="form-group">
          <label>Judul</label>
          <input type="text" class="form-control" name="judul">
      </div>
      <div class="form-group">
          <label>Gambar<span style="color: #a09e9e;">&nbsp;&nbsp;&nbsp;&nbsp;<b>500px x 200px - 800px x 500px</b></span></label>
          <input type="file" class="form-control" name="gambar">
      </div>
      <div class="form-group">
          <label>Ringkasan</label>
          <textarea required size="50" class="form-control" name="ringkasan" name="ringkasan" rows="10" cols="100"></textarea>
      </div>
      <div class="form-group">
          <label>Isi</label>
          <textarea required size="50" class="form-control" name="isi" rows="15" cols="100"></textarea>
      </div>         
      <button type="submit" class="btn btn-primary">Submit</button> 

  </table>  
</form>
  <!-- /.row -->

</section>

Can you write this in the view:

@if (App::isLocale('en')) {

	$content->thank_you;
} @else {

	$content->terima_kasih;
}

@aurawindsurfing

If I am using the package what about the table? I am a little confuse about how to create the table. Since edit feature only passed one id number - If I have two languages then I will requires two id (one for English and one for Indonesian).

Any idea how to solve this issue?

@aurawindsurfing thx for advice. I think as of now, I prefer not to use the package yet, as it is confusing. I tried it before.

if using language localization and selecting the language by querying the language directly after retrieving the lang, I think I prefer that way.

@tray2

one more column for lang. So whenever I select id (Indonesian) --> I can retrieve the lang selection, using lang localization to select all the content from the selected language.

That's the logic right?

Hello,

I want to make a website with two languages. My plan is to have a form with two tabs. One for English and the other one for Indonesian.

Then in the database I want to split the table into two tables (for example: service_id dan service_en) for each table with the same meaning.

Then, will it be possible just by pressing one flag click on the front page, it will be automatically select the correct language ?

Which means it automatically knows which table to select?

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.