Kommunikation Laravel & VueJS im Warenkorb

Hey, ich bräuchte ein bisschen Hilfe / Input bei folgendem Problem:

Im Warenkorb unseres kleinen Onlineshops werden, wie üblich, die ausgewählten Artikel aus dem Shop angezeigt und der Gesamtpreis dieser Artikel berechnet.

Die Artikel(preise) kommen, ebenso wie der Gesamtpreis ($total), über PHP aus dem CartController:

@foreach($items as $item)
  @if(session($item->name))

    <div>
       <p>
          {{ $item->title }}<br>
          ({{ $item->content }} Stk.)
       </p>
       <p>
          {{ $item->price }} €
       </p>
       <p>
          {{ number_format(session($item->name) * $item->price, 2, ',', '.') }} €
       </p>
    </div>

  @endif
@endforeach

<div>
    <p>Summe:</p>
    <p>
        {{ number_format($total, 2, ',', '.') }} €
    </p>
</div>

Die Versandkosten sollen via HTML select gesetzt werden - dabei sollen das Zielland gewählt und die entsprechenden Versandkosten angezeigt werden.

Das habe ich mit VueJS gelöst, da ich an dieser Stelle nicht möchte, dass die Kunden diese Auswahl nochmal bestätigen müssen, um das "hintenrum" über PHP zu lösen.

So sieht mein Vue Script dazu aus:

new Vue({
    el: '#shipping',
    data: {
        options: [],
        selected: '0.00',
        total: '',
    },
    mounted () {
        axios.get('/shipping').then(response => this.options = response.data);
    }
});

Und so sieht es im Blade File aus:

<div>
    <div>
        <label for="shipOptions">Versand nach:</label>
        <select id="shipOptions" v-model="selected">
            <option v-for="option in options" :value="option.fee">
                @{{ option.country }}
            </option>
        </select>
     </div>
     <p>
         @{{ selected }} €
     </p>
</div>

Das funktioniert alles soweit gut und tut, was es soll.

Nun möchte ich aber natürlich am Ende auch den Gesamtpreis, also Artikelpreise + Versandkosten, anzeigen.

Und da weiß ich grad nicht weiter.

Da ich den Gesamtpreis über den Controller ja quasi schon im System hab, würde ich am liebsten diesen Wert irgendwie an mein VueJS Script übergeben und die Versandkosten einfach dazu addieren.

Ist der einzige Weg, das zu bewerkstelligen, das als Vue Component anzuegen? So könnte ich $total ja wahrscheinlich als Property übergeben, oder?

Gibt es noch eine andere Möglichkeit ohne Component?

Danke schonmal und viele Grüße,

Lena

Ja, ich schätze ich werde um die Component nicht herum kommen in dem Fall... danke auf jeden Fall für die Rückmeldung!

Livewire klingt tatsächlich spannend, danke für den Tipp. Werde ich mir bei nächster Gelegenheit mal genauer anschauen.