我有一个livewire组件类和一个livewire刀片组件。在livewire刀片组件中,我有一个提交按钮,当它被单击时,应该调用updatedCity方法来更新城市。
但是,当在livewire组件上单击提交按钮时,就会出现错误
感谢无法解决依赖关系[参数#0 [$city]]在类AppHttpLivewireWeatherInfo
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,
]);
}
}
叶片组件是这样的:
<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>
你不需要传递任何东西给你的test()
方法,$city
参数已经通过wire:model="city"
设置了
public function test()
{
$this->apiKey = config('services.openweather.key');
$this->getWeatherByCity();
}
API密钥也不会在请求之间改变,这意味着在test()
方法中设置$this->apiKey = config('services.openweather.key');
也是多余的,因为它在mount()
中设置。
这意味着你可以完全删除你的test()
方法,使getWeatherByCity()
成为一个公共方法(而不是一个受保护的),然后执行
<form wire:submit.prevent="getWeatherByCity">
您需要将$city
参数传递给test
函数,如下所示
<form wire:submit.prevent="test('the city you want')">