hjortur17

It's working now! @sti3bas thanks for the help

Okay, this works in a way. Now I need to press the button twice to run the method

Hi, how can I run method only once but if you change the input be able to run it again.

@click.once="couponApplied()"

Changed it to a axios call, so it's looks like this now:

couponApplied() {
    var self = this;
    
    let input = self.couponInput.toLowerCase().trim();
    let tempFinalPrice = self.finalPrice;

    axios.post('/api/apply/coupon', {
        coupon: input,
        price: tempFinalPrice
    })
    .then(function (response) {
        return self.finalPrice = response.data;
    })
    .catch(function (error) {
        console.log(error);
    });
},

Hi, I have a coupon system and I get all my coupons from a Database and add them to array. What I want to do is letting my app go through the array and see if it finds a match to the user input.

I have lodash if needed.

Here is what it looks like now:

METHOD

couponApplied() {
    if (this.couponInput.toLowerCase().trim() === 'bilahotel2020') {
        let tempFinalPrice = this.finalPrice;

        return this.finalPrice = tempFinalPrice - (tempFinalPrice *(20)/100);
    }
}

COUPONS ARRAY

coupons:Array[1]
    0:Object
        coupon:"bilahotel2020"
        created_at:null
        discount:25
        id:1
        updated_at:null

Hi, I'm trying to v-for and , after each word. If possible I would like to skip the last one.

CODE

Auka þjónustur (<span v-for="service in checkedServiceTitles">{{ service.description }}, </span>)

WEB

Auka þjónustur (Rúðuvökvi (áfylling), Adblue (áfylling), ) 

WHAT I WANT

Auka þjónustur (Rúðuvökvi (áfylling), Adblue (áfylling))

I split it up to 4 computed methods:

        daysPrice: function () {
            if (this.numberOfDays > 5) {
                return ((this.numberOfDays*1500)-7500);
            } else {
                return 0;
            }
        },
        carSizePrice: function () {
            if (this.booking.carSize === 'Fólksbíll/Jepplingur') {
                return '19900';
            }
            if (this.booking.carSize === 'Jeppi') {
                return '24900';
            }
            if (this.booking.carSize === 'Yfirstærð') {
                return '28900';
            }
        },
        servicesPrice: function () {
            let filtered = _.filter(this.services, (v) => _.includes(this.booking.checkedService, v.id));
            let finalPrice = 0;

            for (var i = filtered.length - 1; i >= 0; i--) {
                finalPrice = Number(finalPrice) + Number(filtered[i].price.price);
            }

            return finalPrice;
        },
        finalPrice: function () {
            let price = Number(this.daysPrice)+Number(this.carSizePrice)+Number(this.servicesPrice);

            return price;
        },

I split it up to 4 computed methods:

        daysPrice: function () {
            if (this.numberOfDays > 5) {
                return ((this.numberOfDays*1500)-7500);
            } else {
                return 0;
            }
        },
        carSizePrice: function () {
            if (this.booking.carSize === 'Fólksbíll/Jepplingur') {
                return '19900';
            }
            if (this.booking.carSize === 'Jeppi') {
                return '24900';
            }
            if (this.booking.carSize === 'Yfirstærð') {
                return '28900';
            }
        },
        servicesPrice: function () {
            let filtered = _.filter(this.services, (v) => _.includes(this.booking.checkedService, v.id));
            let finalPrice = 0;

            for (var i = filtered.length - 1; i >= 0; i--) {
                finalPrice = Number(finalPrice) + Number(filtered[i].price.price);
            }

            return finalPrice;
        },
        finalPrice: function () {
            let price = Number(this.daysPrice)+Number(this.carSizePrice)+Number(this.servicesPrice);

            return price;
        },

Hi, I'm using Axios to get data from a Controller and I need Axios to push an array but it is never pushing a array. So what I'm is hoping for is checkServies[12,32,1] but what it is doing: checkServices[]=12.... Any idea how to make it use it like an array?

Hi, I have a array of services where users can check a checkbox and select a service they want. But I'm having problem figuring out how can I calculate the price. My solution always always subtracts the last service check but and that leads up getting the price lower than the starting price. Any way to subtract the checked price?

Here is my solution:

DIV

<div class="flex flex-wrap flex-row">
    <div v-for="service in services" v-if="service.carSize === booking.carSize" class="w-1/3 -mx-4">
        <div class="flex-1 p-4">
            <div class="flex">
                <div class="flex-1">
                    <input class="leading-tight" type="checkbox" :value="service.id" v-model="booking.checkedService" @click="addToArray(service.id); updatePriceAfterServices(service)" :id="service.id" :aria-label="service.description">
                </div>
                <div class="w-full ml-2 self-center">
                    <p class="font-bold" v-text="service.description"></p>
                    <p class="italic" v-text="service.price.price + 'kr'"></p>
                </div>
            </div>
        </div>
    </div>
</div>

METHOD

updatePriceAfterServices: function (service) {
    var startPrice = Number(this.extraPriceForDays + this.startPrice);
    var servicePrice = Number(service.price.price);
            
    if (this.booking.checkedService.includes(service.id)) {
        return this.finalPrice = Math.abs(startPrice+servicePrice);
    } else {
        return this.finalPrice = Math.abs((this.finalPrice)-servicePrice);
    }
},

Sorry forgot to delete the old dd. But this did the trick, thanks @ahmeddabak

if ($request->path() === ('profill/'.\Auth::user()->socialId)) {
    return $next($request);
}

return redirect('/');

I can't figure out why the middleware is not allowing me through. This is the middleware:

public function handle($request, Closure $next)
    {
        // dd(('profill/'.\Auth::user()->socialId));

        if ($request === ('/profill/'.\Auth::user()->socialId)) {
            return $next($request);
        }

        return redirect('/');
    }

If I do dd($request);, I get /profill/1712992222 and my Auth::user()->socialId has the same. Any ideas?

@kevinbui - Yours was not working for me. Got error about an unexpected return

Hi, I have 10 things services in a package. Called: offered_services_1 and up until 9. How can I use foreach to go through all of these?

@foreach ($packages as $package)
            <ul>
                <h2>{{ $package->title }}</h2>
                <li>{{ $package->{'offered_service_'} }}</li>
            </ul>
        @endforeach

@nakov - One service didn't have price @snapey - I changed the name to price

No, it didn't work :/

No, I do not have price_id in my services. I only have $table->unsignedInteger('service_id'); on prices table.

Do you recommend change the price to belongsTo relationship

Okay, but if I want to get all of them, can I do this:

    $services = Service::latest()->get();

    compact('services')

And then in the blade

@foreach ($services as $service)
            <ul>
                <li>{{ $service->prices }}</li>
            </ul>
        @endforeach

And if I do it like this I get this as an response:

    {"id":10,"service_id":1,"title":"B\u00f3n a\u00f0 utan","price":"2000","created_at":null,"updated_at":null}

    {"id":1,"service_id":3,"title":"Dj\u00faphreinsun s\u00e6ta","price":"11.500","created_at":null,"updated_at":null}

    {"id":2,"service_id":4,"title":"Dj\u00faphreinsun teppa","price":"7.000","created_at":null,"updated_at":null}

    {"id":3,"service_id":5,"title":"Dj\u00faphreinsun s\u00e6ta og teppa","price":"17.500","created_at":null,"updated_at":null}

    {"id":4,"service_id":6,"title":"R\u00fa\u00f0uv\u00f6kvi","price":"2000","created_at":null,"updated_at":null}

    {"id":5,"service_id":7,"title":"AdBlue","price":"800","created_at":null,"updated_at":null}

    {"id":6,"service_id":8,"title":"Frostl\u00f6g","price":"950","created_at":null,"updated_at":null}

    {"id":7,"service_id":9,"title":"Smur\u00fej\u00f3nusta","price":"22.000","created_at":null,"updated_at":null}

    {"id":8,"service_id":10,"title":"Almenn verkst\u00e6\u00f0is\u00fe\u00f3nusta","price":"Hafa samband","created_at":null,"updated_at":null}

    {"id":9,"service_id":11,"title":"Al\u00ferif","price":"19.900","created_at":null,"updated_at":null}

And I can't get the price doing this, because then I get Trying to get property 'price' of non-object

@foreach ($services as $service)
            <ul>
                <li>{{ $service->prices->price }}</li>
            </ul>
        @endforeach

I stopped using this component because of this issue. But thanks for the help.

Hi, I'm using hasOne relationship between Service and Price. But when I try to get the Price like this:

public function getServices()
    {
        $services = Service::latest()->get();

        if (request()->wantsJson()) {
            return $services->prices;
        }

        return $services->prices;
    }

I get this message:

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

Here is Service.php

public function prices()
    {
        return $this->hasOne('App\Price');
    }

Hi, I'm trying to add a pivot table and have foreign keys in it but I always get this error:

SQLSTATE[HY000]: General error: 3780 Referencing column 'booking_id' and referenced column 'id' in foreign key constraint 'booking_service_booking_id_foreign' are incompatible. (SQL: alter table `booking_service` add constraint `booking_service_booking_id_foreign` foreign key (`booking_id`) references `bookings` (`id`) on delete cascade)

Here is my CreateBookingServiceTable:

public function up()
    {
        Schema::create('booking_service', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedInteger('booking_id');
            $table->unsignedInteger('service_id');
            $table->timestamps();

            $table->unique(['booking_id', 'service_id']);
        });

        Schema::table('booking_service', function($table) {
            $table->foreign('booking_id')->references('id')->on('bookings')->onDelete('cascade');
            $table->foreign('service_id')->references('id')->on('services')->onDelete('cascade');
        });
    }

And here is my CreateBookingsTable

public function up()
    {
        Schema::create('bookings', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->timestamps();
        });
    }

And here is my CreateServicesTable

public function up()
    {
        Schema::create('services', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('carSize');
            $table->string('description');
            $table->timestamps();
        });
    }

Hi, I just installed a new plugin and trying to use but I get an error message, that sounds like this:

Raw expression: v-lazy="/images/survey/not-spicy.jpg"

Here is my app.js:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('homepage', require('./components/HomepageComponent.vue').default);

import VueLazyload from 'vue-lazyload'; 
Vue.use(VueLazyload);

const app = new Vue({
    el: '#app',
});

That worked! Thanks!

You could use Laravel Hash, something like this:

use Illuminate\Support\Facades\Hash;

Hash::make(yourData)

@piljac1 - This is what I get if I do this dd($recipes->toSql(), $recipes->getBindings());:

"select * from `recipes` where (`vegan` = ? and `pesceterian` = ? and `continents` = ? and `food` = ? and `spicy` = ?)"

array:5 [▼
  0 => "true"
  1 => "true"
  2 => "Evrópa"
  3 => "Fisk"
  4 => "true"
]

@piljac1 - I'm not using strings, I'm using boolean

@snapey - So it's called vegan and pescetarian in my database, I just wrote pe and ve to fit. Here is my migration:

Schema::create('recipes', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->text('paragraph')->nullable();
            $table->boolean('vegan')->default(0);
            $table->boolean('pesceterian')->nullable();
            $table->string('continents');
            $table->string('food');
            $table->boolean('spicy')->default(0);
            $table->string('credit')->nullable();
            $table->string('link_to_image')->nullable()->default('default.jpg');
            $table->timestamps();
        });

And here is the input (I'm using v-bind to get boolean, not a string):

<input type="radio" id="vegan" name="veganPick" :value="true" class="opacity-0 fixed w-0" v-model="veganPick">

<input type="radio" id="notVegan" name="veganPick" :value="false" class="opacity-0 fixed w-0" v-model="veganPick">

But if I dd($recipes), I get this:

Illuminate\Database\Eloquent\Collection {#252 ▼
  #items: []
}

And if I try this:

$recipes = Recipes::where([
            ['vegan', $request['vegan']],
            ['pesceterian', $request['pesceterian']],
            ['continents', $request['continents']],
            ['food', $request['food']],
            ['spicy', $request['spicy']],
        ])->get();

I still get the same response.

This just returns this:

array:5 [▼
  "vegan" => "true"
  "pesceterian" => "true"
  "continents" => "Evrópa"
  "food" => "Fisk"
  "spicy" => "true"
]

Here is the URL I'm trying in the browser:

http://localhost:3000/uppskriftir/s%C3%A6kja?vegan=true&pesceterian=true&continents=Evr%C3%B3pa&food=Fisk&spicy=true

And my database line is like this:

id  title       para    ve  pe  contine food    sp  credit  image       created updated
1   Einhvað NULL    1   1   Evrópa  Fisk        1   NULL    default.jpg NULL    NULL

Hi, I'm using Vue JS to submit at axios from to get data from database but it always return empty, I can't figure out what I'm doing wrong.

Form submit with axios

submitForm() {
    axios.get('/uppskriftir/sækja', {
        params: {
            vegan: this.veganPick,
            pesceterian: this.pesceterianPick,
            continents: this.continentsPick,
            food: this.foodPick,
            spicy: this.spicyPick
        }
    })
    .then(response => {
        console.log('Response: ' + response);
        this.recipes = response.data.recipes;
    })
    .catch(function (error) {
        console.log('Error: ' + error);
    })
    .finally(() => this.loading = false);
}

RecipesController

$recipes = Recipes::where([
    ['vegan', $request->vegan],
    ['pesceterian', $request->pesceterian],
    ['continents', $request->continents],
    ['food', $request->food],
    ['spicy', $request->spicy],
])->get();

return response()->json([   
    'recipes' => $recipes,
]);

I'm using Chrome Devtools and before it was showing like a string but now like a boolean

@nakov - Now it's at least not showing a string here. But still not getting anything from the database 🤔

pesceterianPick:true
spicyPicked:true
veganPick:true

Hi, I'm using radio buttons and I need the value of them to be true or false but I'm not sure I'm using the value as a string or actual boolean. I have in my database 1 or 0 for true or false but nothing is matching up so I'm starting to think the value is returning incorrect. Please following code:

Input

<input type="radio" id="pesceterian" name="pesceterianPick" value="true" class="opacity-0 fixed w-0" v-model="pesceterianPick">

Hi, I'm trying to print out the first 20 items (0-19) and then 20-29 and 30-39 and but titles in between. See example:

<tbody>
    <div v-for="ingredient in recipes[indexLoop].ingredients">
        <h4 class="uppercase font-bold text-base" v-text="ingredient.firstTitle"></h4>
        <tr class="flex" v-for="(step, index, key) in (ingredient).slice(0, 19)" v-if="key == index">
            <td class="py-2 border-b border-primary-gray w-full" v-if="step">
                <p class="text-sm capitalize" v-text="step"></p>
            </td>
        </tr>

        <h4 class="uppercase font-bold text-base" v-text="ingredient.secondTitle"></h4>
        <tr class="flex" v-for="(step, index, key) in (ingredient).slice(20, 29)" v-if="key == index">
            <td class="py-2 border-b border-primary-gray w-full" v-if="step">
                <p class="text-sm capitalize" v-text="step"></p>
            </td>
        </tr>
                                                        
        <h4 class="uppercase font-bold text-base" v-text="ingredient.thirdTitle"></h4>
        <tr class="flex" v-for="(step, index, key) in ingredient" v-if="key == index">
            <td class="py-2 border-b border-primary-gray w-full" v-if="step">
                <p class="text-sm capitalize" v-text="step"></p>
            </td>
        </tr>
    </div>
</tbody>

But Vue is not allowing my to slice ingredient

Got it to work like this:

<div v-for="instruction in recipes[indexLoop].instructions">
    <ul>
        <li v-for="(step, index, key) in instruction" v-if="key == index">
            <p class="text-sm leading-relaxed mb-4">{{ step }}</p>
        </li>
    </ul>
</div>

This is my migration if that helps:

Schema::create('instructions', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedInteger('recipes_id');
            $table->string('1-title')->nullable();
            $table->string('2-title')->nullable();
            $table->string('3-title')->nullable();
            $table->string('1')->nullable();
            $table->string('2')->nullable();
            $table->string('3')->nullable();
            $table->string('4')->nullable();
            $table->string('5')->nullable();
            $table->string('6')->nullable();
            $table->string('7')->nullable();
            $table->string('8')->nullable();
            $table->string('9')->nullable();
            $table->string('10')->nullable();
            $table->string('11')->nullable();
            $table->string('12')->nullable();
            $table->string('13')->nullable();
            $table->string('14')->nullable();
            $table->string('15')->nullable();
            $table->string('16')->nullable();
            $table->string('17')->nullable();
            $table->string('18')->nullable();
            $table->string('19')->nullable();
            $table->string('20')->nullable();
            $table->timestamps();
        });

@tykus - No errors, but doesn't print anything on the screen

This works in away. This also print's out id and recipes_id

I have all the instructions named 1,2,3,4... up until 30 so how do I only print out those fields? Using index?

recipes:Array[1]
0:Object
    instructions:Array[1]
        0:Object
            0:"Setjið saman hráefnið í marineringuna og skerið kjúklinginn í litla bita. Marinerið kjúklinginn í leginum í 30 mín."
            1:"Saxið grænmeti og léttsteikið, takið til hliðar"
            2:"Setjið kjúklinginn ásamt marineringunni á heita pönnu og steikið þar til hann er gegnumsteiktur"
            3:"Sjóðið núðlur samkvæmt leiðbeiningum, tekur ekki nema 4-5 mín."
            4:"Blandið saman kjúklingnum og grænmeti. Setijð núðlurnar í skál og hellið af pönnunni yfir. Berið fram með chili, ferskum kóríander ef hann er til og jafnvel nokkrum hnetum ef þið eigið."

I'm trying to run through this instruction array which is inside recipes obejct

Sorry, it was supposed to be on li

Hi, I can't get my v-for to work. I have an instruction table assigned to recipes (They are numbered from 1-30). And I fetch them when I get the recipe from the database. But my v-for will not loop through that array.

BTW: The index in the loop always prints out 0

Here is the v-for

<ul v-for="(instruction, index, key) in recipes[indexLoop].instructions">
    <li class="mb-4">
        <p class="text-sm" v-text="instruction.index"></p>
    </li>
</ul>

And this is what v-text prints out if I only print out instruction

{ "0": "Setjið saman hráefnið í marineringuna og skerið kjúklinginn í litla bita. Marinerið kjúklinginn í leginum í 30 mín.", "1": "Saxið grænmeti og léttsteikið, takið til hliðar", "2": "Setjið kjúklinginn ásamt marineringunni á heita pönnu og steikið þar til hann er gegnumsteiktur", "3": "Sjóðið núðlur samkvæmt leiðbeiningum, tekur ekki nema 4-5 mín.", "4": "Blandið saman kjúklingnum og grænmeti. Setijð núðlurnar í skál og hellið af pönnunni yfir. Berið fram með chili, ferskum kóríander ef hann er til og jafnvel nokkrum hnetum ef þið eigið.", "5": null, "6": null, "7": null, "8": null, "9": null, "10": null, "11": null, "12": null, "13": null, "14": null, "15": null, "16": null, "17": null, "18": null, "19": null, "id": 1, "recipes_id": 1, "1-title": null, "2-title": null, "3-title": null, "created_at": null, "updated_at": null }

The 500 message was coming from my solution. @nakov - Your latest solution worked for me. Thank you for the help!

@nakov - This just got the same as this:

$recipes = Recipes::where([
            ['maltid', $request->maltid],
            ['vegan', $request->vegan],
            ['heimsalfa', $request->heimsalfa],
            ['kjot', $request->kjot],
            ['spicy', $request->spicy],
        ])->get();

I didn't get the ingredients, only the recipe. But no error message 😃

This didn't work because whereHas doesn't allow arrays.

Hi, how can I get data from One To Many relationships and pass it forward with JSON?

See controller:

public function show(Request $request)
    {
        $recipes = Recipes::where([
            ['maltid', $request->maltid],
            ['vegan', $request->vegan],
            ['heimsalfa', $request->heimsalfa],
            ['kjot', $request->kjot],
            ['spicy', $request->spicy],
        ])->get();

        $instructions = Recipes::find(1)->instructions()->where([
            ['maltid', $request->maltid],
            ['vegan', $request->vegan],
            ['heimsalfa', $request->heimsalfa],
            ['kjot', $request->kjot],
            ['spicy', $request->spicy],
        ])->first();

        $ingredients = Recipes::find(1)->ingredients()->where([
            ['maltid', $request->maltid],
            ['vegan', $request->vegan],
            ['heimsalfa', $request->heimsalfa],
            ['kjot', $request->kjot],
            ['spicy', $request->spicy],
        ])->first();

        return response()->json([
            'recipes' => $recipes,
            'instructions' => $instructions,
            'ingredients' => $ingredients,
        ]);
    }

If I do this like this, I get 500 message.

But here is the Recipes Model:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Recipes extends Model
{
    public function ingredients()
    {
        return $this->hasMany('App\Ingredients');
    }   

    public function instructions()
    {
        return $this->hasMany('App\Instructions');
    }
}

Hi, do any of you know of a good solution or plug in to use when Axios is getting data from the database? Sometimes it can take a long time and then it would be good to display loader instead the component empty.

Hi, I'm trying to check if my indexLoop is larger than the length of an array. If so reset it but if not, just continue adding to it. I'm trying to do it add the @click event like this:

@click="(indexLoop > recipes.length) ? indexLoop=0 : indexLoop++"

@prasadchinwal5 - Thanks, that worked.