render method triggered unnecessarily

[hirani89]

How do I use @this.property to set the value of a property without triggering the render function.

This is the code I have

<div class="w-full flex py-3 pl-2 items-center hover:bg-gray-300 cursor-pointer border-b">
  <p class="text-sm" onclick="document.getElementById('query').value='{{$address['address']}}';document.getElementById('suggestions').classList.add('hidden');@this.addressr='{{$address['id']}}';">{{$address['address']}}</p>
</div>

when I click on the p element, the render function is triggered because of the use of @this.addressr='{{$address['id']}}'
I want to prevent that from happening.

My initial plan was to set the value of a hidden input element. But I realised that hidden element values are not pushed to the livewire class.

I then created a readonly input of type text. Still the property was not being passed to the controller.

Here is the controller.

<?php
	
	namespace App\Http\Livewire;
	
	use App\Http\Controllers\AddressrController;
	use Illuminate\Http\Request;
	use Livewire\Component;
	use LivewireUI\Modal\ModalComponent;
	
	class CreateAddress extends ModalComponent
	{
		public $query = '';
		public $name, $company, $addressr, $phone, $email;
		public $addresses=[];
		
		public function mount()
		{
			$this->addressr = "";
		}
		
		public function setAddressr($addressr)
		{
			$this->addressr = $addressr;
		}
		public function updatedQuery()
		{
			$this->addresses = AddressrController::search($this->query);
		}
		public function render()
		{
			return view('livewire.create-address', ['addresses' => $this->addresses]);
		}
		
		public function create()
		{
			$this->closeModal();
		}
	}

And the html

<x-address.create formAction="create">
	<x-slot name="title">
		Create New Address
	</x-slot>

	<x-slot name="content">
		<div>
			<x-jet-label for="name" value="{{ __('Name') }}"/>
			<x-jet-input wire:model="name" id="name" class="block mt-1 w-full" type="text" name="name" required autofocus/>
		</div>

		<div class="mt-4">
			<x-jet-label for="company" value="{{ __('Company') }}"/>
			<x-jet-input wire:model="company" id="company" class="block mt-1 w-full" type="text" name="company" required/>
		</div>

		<div class="mt-4">
			<x-jet-label for="query" value="{{ __('Address') }}"/>
			<x-jet-input wire:model.debounce.500ms="query" id="query" class="block mt-1 w-full" type="text" name="query"
			             onchange="document.getElementById('suggestions').classList.remove('hidden')" wire:change="$set('addressr','')"/>
		</div>

{{--		<x-jet-input type="text" wire:model="addressr" id="addressr" name="addressr"/>--}}

		@if(!empty($query))
			@if(!empty($addresses))
				<div class="absolute left-1 mt-1 z-10 w-full bg-white overflow-y-auto max-h-56 shadow-lg list-group"
				     id="suggestions" style="width: 98.2%; top: 51%">
					<!-- items -->
					@foreach($addresses as $address)
						<div class="w-full flex py-3 pl-2 items-center hover:bg-gray-300 cursor-pointer border-b">
							<p class="text-sm"
{{--							   wire:click="$set('addressr','{{$address['id']}}')"--}}
							   onclick="document.getElementById('query').value='{{$address['address']}}';document.getElementById('suggestions').classList.add('hidden');">{{$address['address']}}</p>
						</div>
					@endforeach
				</div>
			@else
				<div class="list-item">No results!</div>
			@endif
		@endif
		<div class="mt-4">
			<x-jet-label for="phone" value="{{ __('Phone') }}"/>
			<x-jet-input wire:model="phone" id="phone" class="block mt-1 w-full" type="text" name="phone"/>
		</div>

		<div class="mt-4">
			<x-jet-label for="email" value="{{ __('Email') }}"/>
			<x-jet-input wire:model="email" id="email" class="block mt-1 w-full" type="email" name="email"
			             :value="old('email')"/>
		</div>
	</x-slot>
</x-address.create>

Also, you can see in the comments. I tried to use wire:click="$set('addressr','{{$address['id']}}')" and the same thing happens