marfino3028

I Need to get my product_varians with v-for

This Is My JSON

products: [

{

  id_product: 1,

  name_product: 'data A',

  description: 'satu satu satu satu satu satu satu satu satu satu satu satu satu satu satu',

  product_barcode: '423253432424',

  status: 'ready',

  featured: 'aktif',

  id_business: 'BS1',

  product_varians: [

    {

      id_product_option: 1,

      variant_name: 'dsdghsd',

      product_price_normal: '50000',

      product_price_promo: '46000',

      product_hpp: '45000',

      product_sku: 'dashgd2323',

      use_stock: 'aktif',

      use_wholesaler: 'aktif',

      stock: '15',

      wholesaler: '45500',
    }
  ]
},

this my vue with v-for and getters

My getters

getProducts (state) {

return state.products

},

My Computed

...mapGetters('dataCashier', {

  dataProduct: 'getProducts'

})

My Method

varianData (data) {

  this.initValues(data)

  this.id_product = `${data.id_product}`

  this.name_product = `${data.name_product}`

  this.description = `${data.description}`

  this.url_images = `${data.url_images}`

  this.id_product_option = `${data.product_varians.id_product_option}`

  this.variant_name = `${data.product_varians.variant_name}`

  this.product_price_normal = `${data.product_varians.product_price_normal}`

  this.product_price_promo = `${data.product_varians.product_price_promo}`

  this.popupActivo = true
},

my template

  <div :data="product_varians">

  <vs-card v-for="(varian, index) in data" :key="index" class="cardx grid vs-lg='6' vs-sm='6' vs-xs='6' ">

        <div slot="header">                

            <div :data="data[index].variant_name">{{ data[index].variant_name }}</div>

            {{ variant_name }}

        </div>

      </vs-card>

      </div>

</vs-popup>

  <vs-row justify= "space-between">

    <vs-col v-for="product in dataProduct" :key="product.id"  class="pl-1 pr-1" type="flex" vs-justify="center" vs-w="4" >

      <div @click.stop="varianData(product)">

      <vs-card class="cardx grid vs-lg='6' vs-sm='6' vs-xs='6' ">

        <div slot="header">                

            <div class="item-img-container img-container mb-4 bg-white h-64 flex items-center justify-center mb-4 cursor-pointer" >

                    <img :src="`${product.url_images}`" class="rounded w-full">

                </div>

        </div>

        <table>

          <tr>

            <td><p class="text-lg font-bold text-primary mt-5 mb-2">{{ product.name_product }}</p></td>

            </tr>

            <tr>

            <td><p class="text-lg font-semibold text-grey">{{ product.description }}</p></td>

          </tr>

        </table>

      </vs-card>

      </div>

    </vs-col>

  </vs-row>

I want to look for cards by letter but on all pages not on the page that was clicked on, as in datatables

like an example https://imgur.com/a/hXvZEFd

this is my php and bootstrap

Products

          

Add Products

<p class="card-text">

<?php

$batas = 6;

$halaman = isset($_GET['halaman'])?(int)$_GET['halaman'] : 1;

$halaman_awal = ($halaman>1) ? ($halaman * $batas) - $batas : 0;	

$Previous = $halaman - 1;

$next = $halaman + 1;

$data = $db_handle->runQuery("SELECT * FROM tblproduct");

$jumlah_data = count($data);

$total_halaman = ceil($jumlah_data / $batas);

$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC limit $halaman_awal, $batas");

if (!empty($product_array)) { 

	foreach($product_array as $key=>$value){
?>

	<div class="product-item ml-3 mb-5 cardz" data-string="<?php echo $product_array[$key]["name"]; ?>">

		<form method="post" action="index.php?action=add&code=<?php echo $product_array[$key]["code"]; ?>">

		<?php

		$setting = array(

		'directory' => 'product-images', // directory file compressed output

		'file_type' => array( // file format allowed

			'image/jpeg',

			'image/png',

			'image/gif'

		)

		);

		$ImgCompressor = new ImgCompressor($setting);

		?>

		<div class="product-image " ><img src="<?php $result = $ImgCompressor->run('product-

images/'.$product_array[$key]["image"], 'jpg', 5); echo 'product-images/comp_'.$product_array[$key]["image"]; ?>" width="150px" height="150px">

		<div class="product-tile-footer">

		<div class="product-title " ><?php echo $product_array[$key]["name"]; ?></div>

		<div class="product-price"><?php echo "Rp. ".number_format($product_array[$key]

["price"],0,',','.');?>

		<div class="cart-action">

		<input type="text" class="product-quantity" name="quantity" value="1" size="1" />		

	</div>

	<input type="submit" value="Add to Cart" class="btn btn-primary btn-block waves-effect waves-light btn-block" />

</div>

		</form>
		
	</div>

<?php

	}

}

?>

		<ul class="pagination justify-content-center">

			<li class="page-item">

				<a class="page-link" <?php if($halaman > 1){ echo "href='?halaman=$Previous'"; } ?>>Previous</a>

			</li>

			<?php 

			for($x=1;$x<=$total_halaman;$x++){

				?> 

				<li class="page-item"><a class="page-link" href="?halaman=<?php echo $x ?>"><?php echo $x; ?></a></li>

				<?php

			}

			?>				

			<li class="page-item">

				<a  class="page-link" <?php if($halaman < $total_halaman) { echo 

"href='?halaman=$next'"; } ?>>Next

			</li>

		</ul>

	</nav>

</p>

this is my javascript

$(".filter").on("keyup", function() { var input = $(this).val().toUpperCase(); $(".cardz").each(function() {

if ($(this).data("string").toUpperCase().indexOf(input) < 0) {

  $(this).hide();

} else {

  $(this).show();

}

})

});

Thank you, yes, I wrote it wrong on the model

SQLSTATE[42S22]: Column not found: 1054 Unknown column 'companies.companies_id' in 'where clause' (SQL: select * from companies where companies.companies_id = 4 and companies.companies_id is not null) (View: C:\xampp\htdocs\transisi\laravel-transisi\resources\views\livewire\employees\index.blade.php) (View: C:\xampp\htdocs\transisi\laravel-transisi\resources\views\livewire\employees\index.blade.php)

index.php

class Index extends Component

{

public function destroy($employeesId)

{

$employees = Employees::find($employeesId);

if($employees) {

    $employees->delete();

}

session()->flash('message', 'Data Berhasil Dihapus.');

return redirect()->route('employees.index');

}

public function render()

{
    $employees = Employees::join('companies', 'employees.companies_id', '=', 'companies.id')

    ->select('employees.*', 'companies.nama AS companies')->get(); //MEMBUAT QUERY UNTUK MENGAMBIL 

DATA return view('livewire.employees.index', [

        'employees' => Employees::latest()->paginate(5)
    ]);

}

}

edit.php

public function mount($id)

{

    $employees = Employees::find($id);
    
    if($employees) {

        $this->employeesId   = $employees->id;

        $this->nama    = $employees->nama;

        $this->email  = $employees->email;

        $this->companies  = $employees->companies_id;

    }

}

public function update()
{

    $this->validate([

        'nama'   => 'required',

        'email' => 'required',

        'companies_id' => 'required',

    ]);

    if($this->employeesId) {

        $employees = Employees::find($this->employeesId);

        if($employees) {

            $employees->update([

                'nama'     => $this->nama,

                'email'   => $this->email,

                'companies_id'   => $this->companies,
            ]);

        }

    }


    session()->flash('message', 'Data Berhasil Diupdate.');

    return redirect()->route('employees.index');
}

public function render()

{

    return view('livewire.employees.edit');

}

}

create.php

public function render()

{

    $this->employees = Employees::join('companies', 'employees.companies_id', '=', 'companies.id')

    ->select('employees.*', 'companies.nama AS companies')->get(); //MEMBUAT QUERY UNTUK MENGAMBIL DATA  

    return view('livewire.employees.create');

}
public function store()

{

    $this->validate([
        'nama'   => 'required|string',

        'email' => 'required|string',

        'companies_id' => 'required|string'

        ]);
    
    $employees = Employees::create([

        'nama'     => $this->nama,

        'email'   => $this->email,

        'companies_id'   => $this->companies

    ]);

    session()->flash('message', 'Data Berhasil Disimpan.');

    return redirect()->route('companies.index');

}

index.blade.php

        @foreach($employees as $employeess)

        <tr>

            <td>{{ $employeess->nama }}</td>

            <td>{{ $employeess->companies }}</td>

            <td>{{ $employeess->email }}</td>

            <td class="text-center">

                <a href="{{ route('employees.edit', $employeess->id) }}" class="btn btn-sm btn-primary">EDIT</a>

                <button wire:click="destroy({{ $employeess->id }})" class="btn btn-sm btn-

danger">DELETE

            </td>

        </tr>

        @endforeach

    </tbody>

</table>

{{ $employees->links() }}

sort the answer

transactions: [

{
  id: 1,

  //pemilik

  namecom: 'Pesanyuk.id',

  addresscom: 'Jl Cawas Gayam Rt 1 Rw 9 Gayam Sukoharjo',

  mailcom: '[email protected]',

  mobilecom: '+6285730277132',

  //pembeli

  nameRecipient: 'Marfino Hamzah',

  addressRecipient: 'Jl Arjuna 2 no 4 rt 03 rw 04 serengan solo 57155',

  mailRecipient: '[email protected]',

  mobileRecipient: '+6289626312680',

  //invoice

  invoice: 'INV000110',

  ordertime: '30 Sep 2020, 20.32 WIB',

  shiptime: '30 Sep 2020, 20.50 WIB',

  shipVia: 'JNE',

  order: [

    {

      item: 'Es Teh',

      itemDesc: 'Manis Murah Meriah',

      qty: 2,

      unitPrice: 9000,

      amount: 18000

    },

    {

      item: 'Es Teler',

      itemDesc: 'Enak Murah Meriah',

      qty: 3,

      unitPrice: 7000,

      amount: 21000

    }

  ],

  metode: 'Go Food',

  status: 'done',

  bank: 'BCA',

  subtotal: 39000,

  discountPercentage: 5,

  discountedAmount: 1950,

  total: 37050

},

when i make the code i get 3 errors

1. Uncaught (in promise)

Object { message: "initMap is not a function", name: "InvalidValueError", stack: "[email protected]https://maps.googleapis.com/maps/api/js?key=AIzaSyD028aZa3qI77oP8kUQKV2kHk4uBiW0mOs& callback=initMap&libraries=&v=weekly:70:347\[email protected]https://maps.googleapis.com/maps/api /js?key=AIzaSyD028aZa3qI77oP8kUQKV2kHk4uBiW0mOs&callback=initMap&libraries=&v=weekly:70:457\[email protected]https://maps.googleapis.com/maps/api /js?key=AIzaSyD028aZa3qI77oP8kUQKV2kHk4uBiW0mOs&callback=initMap&libraries=&v=weekly:141:233\nJj/<@https://maps.googleapis.com/maps/api/js?key=AIzaSyD028aZa3qI77oP8kUQKV2kHk4uBiW0mOs& callback=initMap&libraries=&v=weekly:141:120\n" }

1. [Vue warn]: data functions should return an object:

https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

1. Uncaught TypeError: google_maps__WEBPACK_IMPORTED_MODULE_0__.default is undefined

Enviar a esta dirección

import google from 'google-maps'

export default {

data () {

let map

let latLng = {}

  const onUbicacionConcedida = ubicacion => {

      latLng.lat = ubicacion.coords.latitude

      latLng.lng = ubicacion.coords.longitude

      initMap()

  }

  const onErrorDeUbicacion = err => {

      console.log("Error obteniendo ubicación: ", err);

  }

  const opcionesDeSolicitud = {

      enableHighAccuracy: true, // Alta precisión

      maximumAge: 0, // No queremos caché

      timeout: 5000 // Esperar solo 5 segundos

  };

    navigator.geolocation.getCurrentPosition(onUbicacionConcedida, onErrorDeUbicacion, 

opcionesDeSolicitud);

    function initMap() {

        map = new google.maps.Map(document.getElementById("map"), {

            center: latLng,

            zoom: 15,

            zoomControl: false,

            fullscreenControl: false,

            mapTypeControl: false,

            streetViewControl: false

        });

        const marker = new google.maps.Marker({ map,

            draggable: true,

            animation: google.maps.Animation.DROP,

            title: "Click to zoom",

        });

        function handleChangePosition(data) {

            const lat = data.latLng.lat()

            const lng = data.latLng.lng()

            const geocoder = new google.maps.Geocoder()

            console.log(marker)

            marker.setPosition({ lat, lng })

            map.panTo({ lat, lng })

            geocoder.geocode({ location: { lat, lng } }, (results, status) => {

                if (status === 'OK') {

                    const address = results[0].formatted_address

                    const input = document.querySelector('#address')

                    input.value = address

                }

            })

        }

        marker.addListener('dragend', (data) => {

            handleChangePosition(data)

        })

        map.addListener('click', (data) => {

            handleChangePosition(data)

        })

    }

}

}

with that conditioning why not work ??

<vs-button @click="deleteMultiple()" v-if="selected === 0 || selected > 0" class="p-3 mb-4 mr-4 rounded-lg cursor-pointer shadow-md flex items-center justify-between text-lg font-medium text-base text-white bg-danger">Hapus Pelanggan

i do php artisan storage:link and success but cant display images , and my images in storage/app/public/beasiswa/image.jpg

index.blade.php

                @forelse($beasiswas as $row)

                    <tr>

                        <td class="border px-4 py-2">{{ $row->nama }}</td>

                        <td class="border px-4 py-2">{{ $row->deskripsi }}</td>

                        <td class="border px-4 py-2"><img src="{{ asset('storage/app/public/beasiswa'.$row->foto) }}"></td>

                        <td class="border px-4 py-2">{{ $row->semester}}</td>
                        <td class="border px-4 py-2">

                            <div class="vx-row mb-6">

                            <div class="vx-col sm:w-1/2 w-full">

                            <button wire:click="edit({{ $row->id }})" class="bg-blue-500 hover:bg-blue-700 text-black 

font-bold py-2 px-4 rounded">Edit

                            </div>
                            <div class="vx-col sm:w-1/2 w-full">

                            <button wire:click="delete({{ $row->id }})" class="mt-6 bg-red-500 hover:bg-red-700 text-

black font-bold py-2 px-4 rounded">Hapus

                            </div>

                        </td>

                    </tr>

filesystem.php

'public' => [

        'driver' => 'local',

        'root' => storage_path('app/public'),

        'url' => env('').'/storage',

        'visibility' => 'public',

    ],

thanks solved

Models/Beasiswa.php

protected $fillable = [
    'id','deskripsi', 'foto', 'nama','semester_id','users_id'
];

protected $casts = [
    'id' => 'integer',
    'deskripsi' => 'string',
    'foto' => 'string',
    'nama' => 'string',
    'semester_id' => 'integer',
    'users_id' => 'integer'
];

public function users(){
    return $this->hasMany(\App\User::class, 'users_id');
}
public function semester(){
    return $this->hasMany(\App\Semester::class, 'semester_id');
}

Livewire/Beasiswa/Index.php

public function store()

{

    $validatedData =  $this->validate([
        'nama' => 'required|string',

        'deskripsi' => 'required|string',

        'foto' => 'required|mimes:jpeg,png,jpg,gif,svg,pdf,docx|max:10048',

        'semester' => 'required'
    ]);

    $validatedData['nama'] = $this->foto->store('files', 'public');

    $foto = md5($this->foto . microtime()).'.'.$this->foto->extension();

    $this->foto->storeAs('beasiswa', $foto);

    Beasiswa::updateOrCreate(['id' => $this->id], [    
        'nama' => $this->nama,
        'deskripsi' => $this->deskripsi,
        'foto' => $foto,
        'semester' => $this->semester,
        'user_id' => $this->id
        
    ]);

migrations/create_beasiswa_table.php

public function up()

{

    Schema::create('beasiswa', function (Blueprint $table) {

        $table->id();

        $table->string('deskripsi');

        $table->string('foto');

        $table->string('nama');

        $table->foreignId('semester_id');

        $table->foreignId('users_id');

        $table->foreign('users_id')->references('id')->on('users')->nullable();

        $table->foreign('semester_id')->references('id')->on('semester')->nullable();

        $table->timestamps();

    });

}

livewire/beasiswa/index.php

{

public $beasiswas,$nama,$deskripsi, $foto, $semester_id, $users_id;

public $isModal = 0;

public function render()

{

    $this->beasiswas = Beasiswa::join('semester', 'beasiswa.semester_id', '=', 'semester.id')

    ->join('users', 'beasiswa.users_id', '=', 'users.id')

    ->select('beasiswa.*', 'semester.nama AS semester', 'users.*')

    ->orderBy('created_at', 'DESC')->Auth::user()->get();

    return view('livewire.beasiswa.index');

}

public function create()

{

    $this->resetFields();

    $this->openModal();

}
public function closeModal()

{

    $this->isModal = false;

}

public function openModal()

{
    $this->isModal = true;
}
public function resetFields()
{
    $this->nama = '';
    $this->deskripsi = '';
    $this->foto = '';
    $this->semester_id = '';
    $this->users_id = '';
}
public function store()
{

    //MEMBUAT VALIDASI

    $validatedData =  $this->validate([

        'nama' => 'required|string',

        'deskripsi' => 'required|string',

        'foto' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',

        'semester' => 'required'

    ]);

    $validatedData['nama'] = $this->file->store('files', 'public');

    //QUERY UNTUK MENYIMPAN / MEMPERBAHARUI DATA MENGGUNAKAN UPDATEORCREATE

    //DIMANA ID MENJADI UNIQUE ID, JIKA IDNYA TERSEDIA, MAKA UPDATE DATANYA

    //JIKA TIDAK, MAKA TAMBAHKAN DATA BARU

    Beasiswa::updateOrCreate(['id' => $this->users_id], [

        'nama' => $this->nama,

        'deskripsi' => $this->deskripsi,

        'foto' => $this->foto,

        'semester' => $this->semester,

        'id' => $this->id,

    ]);

    //BUAT FLASH SESSION UNTUK MENAMPILKAN ALERT NOTIFIKASI

    session()->flash('message', $this->users_id ? $this->nama . ' Diperbaharui': $this->nama . ' Ditambahkan');

    $this->closeModal(); //TUTUP MODAL

    $this->resetFields(); //DAN BERSIHKAN FIELD

}

//FUNGSI INI UNTUK MENGAMBIL DATA DARI DATABASE BERDASARKAN ID MEMBER

public function edit($id)

{

    $beasiswa = Beasiswa::find($id); //BUAT QUERY UTK PENGAMBILAN DATA

    //LALU ASSIGN KE DALAM MASING-MASING PROPERTI DATANYA

    $this->users_id = $id;

    $this->nama = $beasiswa->nama;

    $this->deskripsi = $beasiswa->deskripsi;

    $this->foto = $beasiswa->foto;

    $this->semester_id = $beasiswa->semester_id;

    $this->openModal(); //LALU BUKA MODAL

}

//FUNGSI INI UNTUK MENGHAPUS DATA

public function delete($id)

{

    $beasiswa = Beasiswa::find($id); //BUAT QUERY UNTUK MENGAMBIL DATA BERDASARKAN ID

    $beasiswa->delete(); //LALU HAPUS DATA

    session()->flash('message', $beasiswa->nama . ' Dihapus'); 
}

}

index.blade.php

Data Anggota

@if (session()->has('message'))

{{ session('message') }}

@endif

 <button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded 

my-3">Tambah Anggota

    @if($isModal)

        @include('livewire.beasiswa.create')

    @endif

    <table class="table-fixed w-full">

        <thead>

            <tr class="bg-gray-100">

                <th class="px-4 py-2">Nama</th>

                <th class="px-4 py-2">Deskripsi</th>

                <th class="px-4 py-2">Foto</th>

                <th class="px-4 py-2 w-20">Semester</th>

                <th class="px-4 py-2">Action</th>

            </tr>

        </thead>

        <tbody>

            @forelse($members as $row)

                <tr>

                    <td class="border px-4 py-2">{{ $row->nama }}</td>

                    <td class="border px-4 py-2">{{ $row->eskripsi }}</td>

                    <td class="border px-4 py-2">{{ $row->foto }}</td>

                    <td class="border px-4 py-2">{{ $row->semester}}</td>

                    <td class="border px-4 py-2">

                        <button wire:click="edit({{ $row->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-

bold py-2 px-4 rounded">Edit

                        <button wire:click="delete({{ $row->id }})" class="bg-red-500 hover:bg-red-700 text-white font-

bold py-2 px-4 rounded">Hapus

                    </td>

                </tr>

            @empty

                <tr>

                    <td class="border px-4 py-2 text-center" colspan="5">Tidak ada data</td>

                </tr>

            @endforelse

        </tbody>

    </table>

</div>

how to i separate and resupply that code ??

What can i do ??

use App\Models\Semester; use App\Models\Nilai; $this->nilai = Nilai::join('semester', 'beasiswa.semester_id', '=', 'semester.id') ->join('users', 'beasiswa.users_id', '=', 'users.id') ->select('nilai.', 'semester.nama AS semester', 'users.') ->orderBy('created_at', 'DESC')->get(); $this->validate([ 'form.email' => 'required|email', 'form.name' => 'required', 'form.nim' => 'required', 'form.angkatan' => 'required', 'form.alamat' => 'required', 'form.hp' => 'required|max:13', 'form.beasiswa' => 'required', 'form.password' => 'required|confirmed', ]); User::create($this->form); return redirect(route('login')); }

this is my relation https://imgur.com/dmmrqDh

My script on template

<div class="here-map">
    <div ref="map" v-bind:style="{ width: width + '%', height: height }" style="float: left"></div>
    <ol v-bind:style="{ width: (100 - width - 5) + '%'}" style="float: right; min-height: 530px; margin-left: 20px; margin-top: 0">
        <li v-bind="directions in directions">
            <p v-html="directions.instruction"></p>
        </li>
    </ol>
</div>

My script js on HereMap.vue

import H from 'here-maps/mapsjs-core' import 'here-maps/mapsjs-service' import 'here-maps/mapsjs-ui' import 'here-maps/mapsjs-mapevents' export default { name: 'HereMap', data () { return { map: {}, platform: {}, geocoder: {}, directions: [] } }, props: { appId: String, appCode: String, lat: String, lng: String, width: String, height: String }, created () { this.platform = new H.service.Platform({ 'app_id': this.appId, 'app_code': this.appCode }) this.router = this.platform.getRoutingService() this.geocoder = this.platform.getGeocodingService() }, mounted () { this.map = new H.Map( this.$refs.map, this.platform.createDefaultLayers().normal.map, { zoom: 10, center: { lng: this.lng, lat: this.lat } } ) }, methods: { route (start, finish) { const params = { 'mode': 'fastest;car', 'representation': 'display' } let waypoints = [] this.map.removeObjects(this.map.getObjects()) this.directions = [] waypoints = [this.geocode(start), this.geocode(finish)] Promise.all(waypoints).then(result => { const markers = [] for (let i = 0; i < result.length; ++i) { params[`waypoint, ${i}`] = `${result[i][0].lat },${ result[i][0].lng}` markers.push(new H.map.Marker(result[i][0])) } this.router.calculateRoute(params, data => { if (data.response) { for (let i = 0; i < data.response.route[0].leg.length; ++i) { this.directions = this.directions.concat(data.response.route[0].leg[i].maneuver) } data = data.response.route[0] const lineString = new H.geo.LineString() data.shape.forEach(point => { const parts = point.split(',') lineString.pushLatLngAlt(parts[0], parts[1]) }) const routeLine = new H.map.Polyline(lineString, { style: { strokeColor: 'blue', lineWidth: 5 } }) this.map.addObjects([routeLine, ...markers]) this.map.setViewBounds(routeLine.getBounds()) } }, error => { console.error(error) }) }) }, geocode (query) { return new Promise((resolve, reject) => { this.geocoder.geocode({ searchText: query }, data => { if (data.Response.View[0].Result.length> 0) { data = data.Response.View[0].Result.map(location => { return { lat: location.Location.DisplayPosition.Latitude, lng: location.Location.DisplayPosition.Longitude } }) resolve(data) } else { reject({ 'message': 'No data found' }) } }, error => { reject(error) }) }) } } }

thanks solved :)

what's wrong ?? and what will i do ??

HereMap.vue

let waypoints = [] this.map.removeObjects(this.map.getObjects()) this.directions = [] waypoints = [this.geocode(start), this.geocode(finish)] Promise.all(waypoints).then(result => { const markers = [] for (let i = 0; i < result.length; ++i) { params[waypoint, ${i}] = ${result[i][0].lat },${ result[i][0].lng} markers.push(new H.map.Marker(result[i][0])) }

login.blade.php

        <div>
            <x-jet-label for="email" value="{{ __('Email') }}" />
            <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
        </div>
        <div class="mt-4">
            <x-jet-label for="password" value="{{ __('Password') }}" />
            <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
        </div>
        <div class="block mt-4">
            <label for="remember_me" class="flex items-center">
                <input id="remember_me" type="checkbox" class="form-checkbox" name="remember">
                <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
            </label>
        </div>
        <div class="flex items-center justify-end mt-4">
            @if (Route::has('password.request'))
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </a>
            @endif

            <x-jet-button class="ml-4">
                {{ __('Login') }}
            </x-jet-button>
        </div>
    </form>

web.php

Route::get('/', function () { return view('auth.register'); }); Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () { return view('dashboard'); })->name('dashboard');

http/livewire/login.php

class Login extends Component { public $form = [ 'email' => '', 'password'=> '', ]; public function submit() { $this->validate([ 'email' => 'required|email', 'password' => 'required', ]); Auth::attempt($this->form); return redirect(route('home')); } public function render() { return view('auth.login'); } }

[Vue warn]: Error in render: "TypeError: _vm.manage is undefined"

found in

---> at src/views/pages/owner/Kelola.vue at src/layouts/main/Main.vue at src/App.vue vue.runtime.esm.js:619 TypeError: _vm.manage is undefined render Kelola.vue:237

Kelola.Vue manage () { //ganti suppliers dengan menu yang baru return this.$store.state.dataManage.manage //ganti suppliers dengan menu yang baru | dataSupplier wajib sama dengan bagian created > register module | ganti nama supplierswajib sama dengan state.js nya }, queriedItems () { return this.$refs.table ? this.$refs.table.queriedResults.length : this.manage.length //ganti suppliers dengan menu yang baru } },

I got this eror Access to undeclared static property: Collective\Html\FormFacade::$metadatas (View: C:\xampp\htdocs\difitech\paul\resources\views\catalogs\fields.blade.php)

@foreach ($metadata as $metadatas) {!! Form::label(.$metadatas->metadata_key, .$metadatas->metadata_key) !!} {!! Form::.$metadatas->metadata_type(.$metadatas-> metadata_id, null, ['class' => 'form-control', 'name'=>]) !!} @endforeach

At Console nothing is wrong

moduleAuthActions.js

import jwt from '../../http/requests/auth/jwt/index.js'
import router from '@/router'
export default {
// JWT
loginJWT ({ commit }, payload) {
return new Promise((resolve, reject) => {
  jwt.login(payload.userDetails.email, payload.userDetails.password)
    .then(response => {

      // If there's user data in response
      if (response.data.userData) {

        
        commit('UPDATE_USER_INFO', response.data.userData, {root: true})
      
        // Navigate User to homepage
        router.push(router.currentRoute.query.to || '/')

        
        // Set accessToken
        localStorage.setItem('accessToken', response.data.accessToken)
        
        // Update user details

        // Set bearer token in axios
        commit('SET_BEARER', response.data.accessToken)


        resolve(response)
      } else {
        reject({message: 'Wrong Email or Password'})
      }

    })
    .catch(error => { reject(error) })
})
},
register (payload) {
//const { name, email, password, confirmPassword } = payload.userDetails
//const nameL = 'data'
return new Promise((resolve, reject) => {
  console.log(payload)
  jwt.registerUser(payload.userDetails.name, payload.userDetails.email, payload.userDetails.password)
    .then(response => {

      if (response.data.payment_url) {
        const urli = response.data.payment_url
        router.push(urli)
      }
      
      // Redirect User
      //router.push(router.currentRoute.query.to || '/')

      // Update data in localStorage
      // localStorage.setItem('accessToken', response.data.accessToken)
      //commit('UPDATE_USER_INFO', response.data.userData, {root: true})

      resolve(response)
    })
    .catch(error => { reject(error) })
})

} }

jwt/index.js

import axios from '../../../axios/index.js'

export default { login (email, pwd) { return axios.post('/api/v1/login', { email, password: pwd }) }, registerUser (name, email, password) { return axios.post('/api/v1/register', { name, email, password }) }//, // refreshToken () { // return axios.post('/api/auth/refresh-token', {accessToken: localStorage.getItem('accessToKen')}) // } }

Register.vue html

<vs-input
                  v-validate="'required|name|min:3'"
                  data-vv-validate-on="blur"
                  label-placeholder="Name"
                  name="name"
                  placeholder="Name"
                  v-model="name"
                  icon-pack="feather"
                  icon="icon-user"
                  class="w-full"
                />
                <span class="text-danger text-sm">{{
                  errors.first('name')
                }}</span>
              </div>

Register.vue js

export default {
data () {
 return {
  name: 'ujicoba',
  email: '@gmail.com',
  password: '12345678',
  confirm_password: '12345678',
  //coupon: '',
  isTermsConditionAccepted: false
}
},
computed: {
validateForm () {
  return (
    !this.errors.any() && this.name !== '' && this.email !== '' && this.password !== '' && this.confirm_password 
  !== '' && this.isTermsConditionAccepted === true
  )
}
},
methods: {
checkLogin () {
  if (this.$store.state.auth.isUserLoggedIn()) {
    this.$vs.notify({
      title: 'Login Attempt',
      text: 'You are already logged in!',
      iconPack: 'feather',
      icon: 'icon-alert-circle',
      color: 'warning'
    })
    return false
  }
  return true
},
register () {
  // If form is not validated or user is already login return
  if (!this.validateForm || !this.checkLogin()) return
  //this.$vs.loading()
  const payload = {
    
    userDetails: {
      name: this.name,
      email: this.email,
      password: this.password//,
      //confirmPassword: this.confirm_password
    },
    notify: this.$vs.notify
  }
  this.$store.dispatch('auth/register', payload)
    .then(() => { this.$vs.loading.close() })
    .catch(error => {
      this.$vs.loading.close()
      this.$vs.notify({
        title: 'Error',
        text: error.message,
        iconPack: 'feather',
        icon: 'icon-alert-circle',
        color: 'danger'
      })
    })
}

} }

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in

---> at src/views/pages/owner/Pelanggan.vue at src/layouts/main/Main.vue at src/App.vue

DataViewSidebarPelanggan.vue

<component :is="scrollbarTag" class="scroll-area--data-list-add-new" :settings="settings" :key="$vs.rtl">

  <div class="p-6">

   <vs-input icon-pack="feather" icon="icon-briefcase" label-placeholder="Judul Toko" class="w-full mt-8" />

              <vs-input icon-pack="feather" v-model="dataTagline" name="item-tagline" icon="icon-briefcase" label-placeholder="Tagline" class="w-full mt-8" />

              <vs-input icon-pack="feather"  v-model="dataWA" name="item-wa" icon="icon-briefcase" label-placeholder="Nomor Whatsapp" class="w-full mt-8" />

              <vs-input icon-pack="feather"  v-model="dataGreeting" name="item-greeting" icon="icon-briefcase" label-placeholder="Whatsapp Greeting" class="w-full mt-8" />

              <vs-input icon-pack="feather"  v-model="dataJarak" name="item-jarak" icon="icon-briefcase" label-placeholder="Maksimal Jarak Kirim" class="w-full mt-8" />

              <label class="text-sm mt-8 mb-3 flex">Whatsapp Checkout</label>
              <vs-radio v-model="shiping" color="success" class="mr-5" vs-value="free">Free</vs-radio>
              <vs-radio v-model="shiping" color="success" class="mr-5" vs-value="flat">Flat</vs-radio>
              <vs-radio v-model="shiping" color="success" class="mr-5" vs-value="radius">Radius</vs-radio>
              <vs-radio v-model="shiping" color="success" class="mr-5" vs-value="rajaongkir">Rajaongkir</vs-radio>

              <vs-input icon-pack="feather" v-model="dataRata" name="item-rata" icon="icon-briefcase" label-placeholder="Biaya Kirim Sama Rata" class="w-full mt-8" />

              <vs-input icon-pack="feather" v-model="dataRadius" name="item-radius" icon="icon-briefcase" label-placeholder="Biaya Kirim Berdasarkan Radius" class="w-full mt-8" />

              <vs-input icon-pack="feather" v-model="dataFb" name="item-fb" icon="icon-briefcase" label-placeholder="Link Facebook Page" class="w-full mt-8" />

              <vs-input icon-pack="feather" v-model="dataIg" name="item-ig" icon="icon-briefcase" label-placeholder="Instagram Username" class="w-full mt-8" />
  </div>
</component>

<div class="flex flex-wrap items-center p-6" slot="footer">
  <vs-button class="mr-6" @click="submitData" :disabled="!isFormValid">Buat</vs-button>
  <vs-button type="border" color="danger" @click="isSidebarActiveLocal = false">Batal</vs-button>
</div>

Pelanggan.vue

<data-view-sidebar :isSidebarActive="addNewDataSidebar" @closeSidebar="toggleDataSidebar" :data="sidebarData" />

<vs-table ref="table" multiple v-model="selected" pagination :max-items="itemsPerPage" search :data="products">

  <div slot="header" class="flex flex-wrap-reverse items-center flex-grow justify-between">

    <div class="flex flex-wrap-reverse items-center">

      <!-- ACTION - DROPDOWN -->
      <vs-dropdown vs-trigger-click class="cursor-pointer mr-4 mb-4">

        <div class="p-4 shadow-drop rounded-lg d-theme-dark-bg cursor-pointer flex items-center justify-center text-lg font-medium w-32">
          <span class="mr-2">Actions</span>
          <feather-icon icon="ChevronDownIcon" svgClasses="h-4 w-4" />
        </div>

        <vs-dropdown-menu>

          <vs-dropdown-item>
            <span class="flex items-center">
              <feather-icon icon="TrashIcon" svgClasses="h-4 w-4" class="mr-2" />
              <span>Delete</span>
            </span>
          </vs-dropdown-item>

          <vs-dropdown-item>
            <span class="flex items-center">
              <feather-icon icon="FileIcon" svgClasses="h-4 w-4" class="mr-2" />
              <span>Print</span>
            </span>
          </vs-dropdown-item>

        </vs-dropdown-menu>
      </vs-dropdown>

      <!-- ADD NEW -->
      <div class="p-3 mb-4 mr-4 rounded-lg cursor-pointer flex items-center justify-between text-lg font-medium text-base text-white bg-primary" @click="addNewData">
          <feather-icon icon="PlusIcon" svgClasses="h-4 w-4" />
          <span class="ml-2 text-base text-white">Tambah Pelanggan</span>
      </div>

    </div>


    <!-- ITEMS PER PAGE -->
    <vs-dropdown vs-trigger-click class="cursor-pointer mb-4 mr-4">
      <div class="p-4 border border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium">
        <span class="mr-2">{{ currentPage * itemsPerPage - (itemsPerPage - 1) }} - {{ products.length - currentPage * itemsPerPage > 0 ? currentPage * itemsPerPage : products.length }} of {{ queriedItems }}</span>
        <feather-icon icon="ChevronDownIcon" svgClasses="h-4 w-4" />
      </div>
      <!-- <vs-button class="btn-drop" type="line" color="primary" icon-pack="feather" icon="icon-chevron-down"></vs-button> -->
      <vs-dropdown-menu>

        <vs-dropdown-item @click="itemsPerPage=4">
          <span>4</span>
        </vs-dropdown-item>
        <vs-dropdown-item @click="itemsPerPage=10">
          <span>10</span>
        </vs-dropdown-item>
        <vs-dropdown-item @click="itemsPerPage=15">
          <span>15</span>
        </vs-dropdown-item>
        <vs-dropdown-item @click="itemsPerPage=20">
          <span>20</span>
        </vs-dropdown-item>
      </vs-dropdown-menu>
    </vs-dropdown>
  </div>

  <template slot="thead">
    <vs-th>Gambar</vs-th>
    <vs-th sort-key="namapeg">Nama Pelanggan</vs-th>
    <vs-th sort-key="hp">No HP</vs-th>
    <vs-th sort-key="email">Email</vs-th>
    <vs-th sort-key="long">Longitude</vs-th>
    <vs-th sort-key="lat">Latitude</vs-th>
    <vs-th sort-key="jk">Jenis Kelamin</vs-th>
    <vs-th sort-key="jk">Tanggal Lahir</vs-th>
    <vs-th sort-key="jk">Tanggal Lahir</vs-th>
    <vs-th>Action</vs-th>
  </template>d

  <template slot-scope="{data}">
    <tbody>
      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">

        <vs-td class="img-container">
          <img :src="tr.img" class="product-img" />
        </vs-td>

        <vs-td>
          <p class="product-name font-medium truncate">{{ tr.namapeg }}</p>
        </vs-td>

        <vs-td>
          <p class="product-category">{{ tr.hp }}</p>
        </vs-td>

        <vs-td>
          <p class="product-category">{{ tr.jabatan }}</p>
        </vs-td>

        <vs-td>
          <vs-chip :color="getJumlahColor(tr.jumlah)" class="product-jumlah">{{ tr.jumlah | title }}</vs-chip>
        </vs-td>

        <vs-td>
          <p class="product-price">IDR{{ tr.price }}</p>
        </vs-td>

        <vs-td class="whitespace-no-wrap">
          <feather-icon icon="EditIcon" svgClasses="w-5 h-5 hover:text-primary stroke-current" @click.stop="editData(tr)" />
          <feather-icon icon="TrashIcon" svgClasses="w-5 h-5 hover:text-danger stroke-current" class="ml-2" @click.stop="deleteData(tr.id)" />
        </vs-td>

      </vs-tr>
    </tbody>
  </template>
</vs-table>

I will create multiple upload file with 2 input file but i don't know

Fields.blade.php

<div class="form-group col-sm-6" id="cover">
 {!! Form::label('cover', 'Cover:') !!}
 {!! Form::file('cover', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group col-sm-6" id="full">
 {!! Form::label('full', 'Full:') !!}
 {!! Form::file('full', null, ['class' => 'form-control']) !!}
</div>

CatalogController.php

public function createWithCategory($id)
    {
        $katalog_metadata = \App\Models\KatalogMetadata::with('metadata')
        ->where('category_id',$id)->get();
        return view('catalogs.create')
        ->with('katalog_metadata',$katalog_metadata)
        ->with('category_id',$id);
    }
public function store(CreateCatalogRequest $request)
    {
        $input = $request->all();
        if (\Auth::user()->can('isAdmin')) {
            $input['status'] = 1 ;
        }else{
            $input['status'] = 0 ;
        }
$input['cover'] = $this->uploadingCover($request);
$input['full'] = $this->uploadingFull($request);
$catalog = $this->catalogRepository->create($input);
foreach ($input['metadata'] as $key => $value) {
         $val = [
            'metadata_id'=>$key,
            'metadata_key'=>$value['key'],
            'value'=>$value['value'],
            'catalog_id'=>$catalog->id
           ];
$data = new \App\Models\CatalogMetadataValue($val);       
$catalog->catalog_metadata_value()->save($data);
        }
if (! \Auth::user()->can('isAdmin')) {
            $admin = \App\Models\User::where('role_id','1')->first();
            Mail::to($admin->email)->send(new NotifyNewCatalog($catalog));
        } 
Flash::success('Catalog saved successfully.');
return redirect(route('catalogs.index_with_category',$request->category_id));
    }`protected function uploadingCover($request)
    {
       $destinationPath = 'catalog/cover';
       if(! is_dir($destinationPath)) {
       if(! is_dir('catalog')){
             mkdir('catalog');
            }
        mkdir($destinationPath);
        }
if($request->hasFile('cover')) {
   $file = $request->file('cover');
   $fileName = time() . '.' .$file->getClientOriginalExtension();
   $file->move($destinationPath, $fileName);
 return $destinationPath . '/' . $fileName;
        }
return;
    }
protected function uploadingFull($request){
    $destinationPath = 'catalog/full';
    if(! is_dir($destinationPath)) {
      if(! is_dir('catalog')){
        mkdir('catalog');}
        mkdir($destinationPath);}
    if($request->hasFile('full')) {
       $file = $request->file('full');
       $fileName = time() . '.' . $file->getClientOriginalExtension();
       $file->move($destinationPath, $fileName);
     return $destinationPath . '/' . $fileName;
    }
    return;
    }`

Thanks