davy_yg

davy_yg

Member Since 3 Years Ago

Jakarta

Experience Points
95,700
Total
Experience

4,300 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
444
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 20
95,700 XP
Sep
21
6 hours ago
Activity icon

Started a new Conversation Show Part Of Strings

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

Sep
18
3 days ago
Activity icon

Replied to Submit Button

I finally find the solution.

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

Activity icon

Replied to Submit Button

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]

Activity icon

Replied to Submit Button

Nothing happened.

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

And when I press clicked, nothing happened.

Activity icon

Started a new Conversation Submit Button

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);
		}
	}
Sep
11
1 week ago
Activity icon

Replied to Property [gambar] Does Not Exist On The Eloquent Builder Instance

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.

Activity icon

Replied to Property [gambar] Does Not Exist On The Eloquent Builder Instance

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)

Activity icon

Started a new Conversation Property [gambar] Does Not Exist On The Eloquent Builder Instance

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>
Sep
03
2 weeks ago
Activity icon

Replied to (1/1) TokenMismatchException In VerifyCsrfToken.php (line 68)

I still get the same error message:

(1/1) TokenMismatchException

in VerifyCsrfToken.php (line 68)

Activity icon

Replied to (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
Activity icon

Started a new Conversation (1/1) TokenMismatchException In VerifyCsrfToken.php (line 68)

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?

Aug
26
3 weeks ago
Activity icon

Awarded Best Reply on Update Content Using Latest Ckeditor

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
Activity icon

Replied to Update Content Using Latest Ckeditor

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
Activity icon

Replied to Update Content Using Latest Ckeditor

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?

Activity icon

Started a new Conversation Update Content Using Latest Ckeditor

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
Aug
12
1 month ago
Activity icon

Replied to Edit Using Modal

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.

Activity icon

Replied to Edit Using Modal

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.

Aug
11
1 month ago
Activity icon

Started a new Conversation Edit Using Modal

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?

Activity icon

Awarded Best Reply on Modal

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>

.

Activity icon

Replied to Modal

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>

.

Aug
06
1 month ago
Activity icon

Replied to Modal

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

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

Activity icon

Started a new Conversation Modal

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?

Activity icon

Replied to The POST Method Is Not Supported For This Route. Supported Methods: GET, HEAD, PUT, PATCH, DELETE.

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

Aug
05
1 month ago
Activity icon

Started a new Conversation The POST Method Is Not Supported For This Route. Supported Methods: GET, HEAD, PUT, PATCH, DELETE.

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>
Jul
29
1 month ago
Activity icon

Replied to Two Languages

Can you write this in the view:

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

	$content->thank_you;
} @else {

	$content->terima_kasih;
}
Activity icon

Replied to Two Languages

@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?

Activity icon

Replied to Two Languages

@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.

Activity icon

Replied to Two Languages

@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?

Activity icon

Started a new Conversation Two Languages

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?

Jun
25
2 months ago
Activity icon

Replied to Creating Blog Component

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 | Los Angeles | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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 | Los Angeles | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 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 | Los Angeles 21 | 22 |

{{ $item->title }}

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

invalid expression: Unexpected token '>' in

_s($item->title)

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

29 | Los Angeles 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?

Jun
19
3 months ago
Activity icon

Started a new Conversation Creating Blog Component

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?

Jun
17
3 months ago
Activity icon

Started a new Conversation Convert This Into Component

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);
Jun
06
3 months ago
Activity icon

Replied to Component Registration

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.

Activity icon

Started a new Conversation Component Registration

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?

May
27
3 months ago
Activity icon

Started a new Conversation Vue Component

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 ?

May
25
3 months ago
Activity icon

Replied to Sending Automated Email

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

Activity icon

Started a new Conversation Sending Automated Email

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?

May
23
3 months ago
Activity icon

Awarded Best Reply on Appear As {{ Title }} 2

I found the answer:

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

Replied to Appear As {{ Title }} 2

I found the answer:

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

Started a new Conversation Appear As {{ Title }} 2

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:

May
22
3 months ago
Activity icon

Started a new Conversation Appear As {{ Title }}

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 }} ?

May
21
4 months ago
Activity icon

Replied to V-bind:class And V-bind:style

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?

Activity icon

Replied to V-bind:class And V-bind:style

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>
Activity icon

Started a new Conversation V-bind:class And V-bind:style

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>
May
19
4 months ago
Activity icon

Started a new Conversation Looping Vue

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?

May
18
4 months ago
Activity icon

Replied to Change Box Width And Color

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

export default{

Any clue why?

Activity icon

Replied to Change Box Width And Color

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>
Activity icon

Replied to Change Box Width And Color

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

Activity icon

Replied to Change Box Width And Color

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

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

Activity icon

Replied to Change Box Width And Color

It does not works.