按钮提交时未捕获的 ReferenceError

Question

我有一个 livewire 组件 class 和一个 livewire blade 组件。在 livewire blade 组件中，我有一个提交按钮，单击该按钮时应调用 updatedCity 方法来更新城市。

但是，当在 livewire 组件上单击提交按钮时，它不起作用。例如，用户在输入中键入“慕尼黑”，然后单击提交按钮，但它不起作用，在控制台上 shows : "Uncaught ReferenceError: Dortmund is not defined"，多特蒙德是经过身份验证的用户所在的城市。

谢谢

Blade livewire 组件：

<div>

@guest

    <h1>Please login/register</h1>

@else

    <h1>Weather in
        <b>{{ $city }}</b></h1>

    <main>

        <div>
            <div class="flex items-center justify-between rounded-md">
                <form wire:submit.prevent="getWeatherByCity({{$city}})">
                    <input
                        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>

Livewire 组件class:

class WeatherInfo extends Component 

{ 

public $city; 
private $currentWeatherRes; 
private $forecastWeatherRes;

public function mount()
{
    $this->city = auth()->user()->city ?? $this->city;
    $this->getWeatherByCity($this->city);
}


protected function getWeatherByCity($city)
{

    $apiKey = config('services.openweather.key');

    $this->currentWeatherResp = Http::get(
        "http://api.weatherapi.com/v1/current.json?&q={$this->city}&key={$apiKey}")->json();

    $this->forecastWeatherResp = Http::get(
        "http://api.weatherapi.com/v1/forecast.json?key={$apiKey}&q={$this->city}&days=7")->json();


}

public function render()
{
    return view('livewire.weather-info', [
        'currentWeatherResp' => $this->currentWeatherResp,
        'forecastWeatherResp' => $this->forecastWeatherResp,
    ]);
}
}

Answer 1

您不需要将城市参数发送到您的方法，因为您使用 wire:model="city" 将其绑定到 $this->city。就是这样。

class WeatherInfo extends Component
{
    public $city;
    private $currentWeatherRes;
    private $forecastWeatherRes;

    public function mount()
    {
        $this->city = auth()->user()->city ?? $this->city;
        $this->getWeatherByCity();
    }

    public function getWeatherByCity()
    {
        $apiKey = config('services.openweather.key');

        $this->currentWeatherResp = Http::get(
            "http://api.weatherapi.com/v1/current.json?&q={$this->city}&key={$apiKey}"
        )->json();

        $this->forecastWeatherResp = Http::get(
            "http://api.weatherapi.com/v1/forecast.json?key={$apiKey}&q={$this->city}&days=7"
        )->json();
    }

    public function render()
    {
        return view('livewire.weather-info', [
            'currentWeatherResp' => $this->currentWeatherResp,
            'forecastWeatherResp' => $this->forecastWeatherResp,
        ]);
    }
}

<form wire:submit.prevent="getWeatherByCity()">
    <input type="text" name="city" wire:model="city">
    <div>
        <x-form.button>Submit</x-form.button>
    </div>
</form>

按钮提交时未捕获的 ReferenceError

Uncaught ReferenceError on button submit

javascript

laravel-livewire