I have a livewire component class and a livewire blade component. In the livewire blade component I have a submit button that when is clicked should call the updatedCity method to update the city.

However when the submit button is clicked on the livewire component it appears the error

Unable to resolve dependency [Parameter #0 [ $city ]] in class App\Http\Livewire\WeatherInfo

Thanks

class WeatherInfo extends Component 
{ 
    public $city; 
    private $currentWeatherRes; 
    private $forecastWeatherRes;
    private $unit;
    
    public function mount()
    {
        $this->city = auth()->user()->city ?? '';
        $this->apiKey = config('services.openweather.key');
        $this->getWeatherByCity();
    }
    
    public function test($city)
    {
        $this->city = $city;
        $this->apiKey = config('services.openweather.key');
    
        $this->getWeatherByCity();
    }
    
    protected function getWeatherByCity()
    {
    
        $this->currentWeatherResp = Http::get(
            "http://api.weatherapi.com/v1/current.json?&q={$this->city}&key={$this->apiKey}")->json();
    
        $this->forecastWeatherResp = Http::get(
            "http://api.weatherapi.com/v1/forecast.json?key={$this->apiKey}&q={$this->city}&days=7")->json();
    
    
    }
    
    public function render()
    {
        return view('livewire.weather-info', [
            'currentWeatherResp' => $this->currentWeatherResp,
            'forecastWeatherResp' => $this->forecastWeatherResp,
        ]);
    }
}

And the blade component like this:

<div>
    @guest
        <h1>Please login/register</h1>
    @else
        <h1>Weather in
            <b>{{ $forecastWeatherResp['city']['name'] }}</b></h1>
    
        <main>
    
            <div>
                <div class="flex items-center justify-between rounded-md">
                    <form wire:submit.prevent="test">
                        <input wire:model.defer="city"
                            type="text" name="city">
                        <div>
                            <x-form.button>Submit</x-form.button>
                        </div>
                    </form>
                </div>
            </div>
    
            <div x-data="{ openedIndex: -1  }">
                <div
                    @click="openedIndex == 0 ? openedIndex = -1 : openedIndex = 0">
    
                    <div>
                        <img
                            src="http://openweathermap.org/img/wn/{{ $forecastWeatherResp['current']['condition']['icon'] }}.png"
                            alt="weather icon">
                        <span>
                    {{ round($forecastWeatherResp['current']['temp_c']) }}º
                </span>
                    </div>
    
                    <div>
                <span>
                    Today
                </span>
                        <span>
                    {{ ucwords($forecastWeatherResp['current']['condition']['text']) }}
                </span>
                    </div>
    
                    <svg style="display: none;"
                         x-show.transition.duration.500ms="openedIndex != 0"
                         xmlns="http://www.w3.org/2000/svg"
                         class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                              clip-rule="evenodd"/>
                    </svg>
                    <svg
                        x-show.transition.duration.500ms="openedIndex == 0"
                        xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                              clip-rule="evenodd"/>
                    </svg>
                </div>
                <div
                    x-show="openedIndex == 0"
                    class="w-full border " style="display: none;">
                    <div class="border-t border-gray-200">
                        <dl>
    
                            <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                <dt class="text-sm font-medium text-gray-500">
                                    Feels Like
                                </dt>
                                <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                    {{ round($forecastWeatherResp['current']['temp_c']) }}º
                                </dd>
                            </div>
                            ....
                        </dl>
                    </div>
    
                </div>
    
                @foreach($forecastWeatherResp['forecast']['forecastday'] as $weather)
                    <ul>
                        <li
                            @click="openedIndex == {{ $loop->iteration }} ? openedIndex = -1 : openedIndex = {{$loop->iteration}}"
                            class="w-full">
                            <div>
                                <div>
                                    <img src="http://openweathermap.org/img/wn/{{ $weather['day']['condition']['icon'] }}"
                                         alt="weather icon">
                                </div>
                                ....
    
                            </div>
    
                            <div
                                x-show="openedIndex == {{ $loop->iteration }}">
                                <div>
                                    <dl>
    
                                        <div>
                                            <dt>
                                                Feels Like
                                            </dt>
                                            <dd>
                                                {{ round($weather['day']['avgtemp_c']) }}º
                                            </dd>
                                        </div>
                                        .....
                                    </dl>
                                </div>
    
                            </div>
    
                        </li>
    
                    </ul>
    
                @endforeach
            </div>
        </main>
    
    @endguest
</div>

CodePudding user response：

You don't need to pass anything to your test() method, the $city argument is already set through wire:model="city"

public function test()
{
    $this->apiKey = config('services.openweather.key');

    $this->getWeatherByCity();
}

The API key is also not going to change between requests, which means that setting $this->apiKey = config('services.openweather.key'); in your test() method is also redundant, since its set in your mount().

This means that you can actually remove your test() method entirely, make getWeatherByCity() a public method (instead of a protected one), and then do

<form wire:submit.prevent="getWeatherByCity">

CodePudding user response：

you need to pass $city argument to test function like so

<form wire:submit.prevent="test('the city you want')">