Блог

У меня есть класс компонентов livewire и компонент лезвия livewire. В компоненте livewire blade у меня есть кнопка отправки, которая при нажатии должна вызывать метод updatedCity для обновления города.

Однако при нажатии кнопки «Отправить» на компоненте livewire он не работает. Например, пользователь вводит «Мюнхен» во вводе , а затем нажимает кнопку «Отправить», и это не работает, на консоли shows : "Uncaught ReferenceError: Dortmund is not defined" Дортмунд является городом аутентифицированного пользователя.

Спасибо

Компонент живого провода лезвия:

 lt;divgt;  @guest   lt;h1gt;Please login/registerlt;/h1gt;  @else   lt;h1gt;Weather in  lt;bgt;{{ $city }}lt;/bgt;lt;/h1gt;   lt;maingt;   lt;divgt;  lt;div class="flex items-center justify-between rounded-md"gt;  lt;form wire:submit.prevent="getWeatherByCity({{$city}})"gt;  lt;input  type="text" name="city"gt;  lt;divgt;  lt;x-form.buttongt;Submitlt;/x-form.buttongt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;   lt;div x-data="{ openedIndex: -1 }"gt;  lt;div  @click="openedIndex == 0 ? openedIndex = -1 : openedIndex = 0"gt;   lt;divgt;  lt;img  src="http://openweathermap.org/img/wn/{{ $forecastWeatherResp['current']['condition']['icon'] }}.png"  alt="weather icon"gt;  lt;spangt;  {{ round($forecastWeatherResp['current']['temp_c']) }}º  lt;/spangt;  lt;/divgt;   lt;divgt;  lt;spangt;  Today  lt;/spangt;  lt;spangt;  {{ ucwords($forecastWeatherResp['current']['condition']['text']) }}  lt;/spangt;  lt;/divgt;   lt;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"gt;  lt;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"/gt;  lt;/svggt;  lt;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"gt;  lt;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"/gt;  lt;/svggt;  lt;/divgt;  lt;div  x-show="openedIndex == 0"  class="w-full border " style="display: none;"gt;  lt;div class="border-t border-gray-200"gt;  lt;dlgt;   lt;div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"gt;  lt;dt class="text-sm font-medium text-gray-500"gt;  Feels Like  lt;/dtgt;  lt;dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"gt;  {{ round($forecastWeatherResp['current']['temp_c']) }}º  lt;/ddgt;  lt;/divgt;  ....  lt;/dlgt;  lt;/divgt;   lt;/divgt;   @foreach($forecastWeatherResp['forecast']['forecastday'] as $weather)  lt;ulgt;  lt;li  @click="openedIndex == {{ $loop-gt;iteration }} ? openedIndex = -1 : openedIndex = {{$loop-gt;iteration}}"  class="w-full"gt;  lt;divgt;  lt;divgt;  lt;img src="http://openweathermap.org/img/wn/{{ $weather['day']['condition']['icon'] }}"  alt="weather icon"gt;  lt;/divgt;  ....   lt;/divgt;   lt;div  x-show="openedIndex == {{ $loop-gt;iteration }}"gt;  lt;divgt;  lt;dlgt;   lt;divgt;  lt;dtgt;  Feels Like  lt;/dtgt;  lt;ddgt;  {{ round($weather['day']['avgtemp_c']) }}º  lt;/ddgt;  lt;/divgt;  .....  lt;/dlgt;  lt;/divgt;   lt;/divgt;   lt;/ligt;   lt;/ulgt;   @endforeach  lt;/divgt;  lt;/maingt;  @endguest lt;/divgt;   

Класс компонентов Livewire:

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

Вам не нужно отправлять аргумент city в свой метод, потому что вы используете wire:model="city" его для привязки $this-gt;city . Это оно.

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

 lt;form wire:submit.prevent="getWeatherByCity()"gt;  lt;input type="text" name="city" wire:model="city"gt;  lt;divgt;  lt;x-form.buttongt;Submitlt;/x-form.buttongt;  lt;/divgt; lt;/formgt;