无线电选择后无法访问变量。活丝

Question

新来的拉勒维尔/利维丝。

我有一个输出无线电组的组件，它呈现得很好。

当我选择一个无线电控件时，我会得到一个错误，“尝试读取数组上的属性”。

在这里，我从刀片文件中传递一系列选项。

@livewire('test-options', ['options' => $option])

组件

class TestOptions extends Component {

public $selected;
public $options;

public function mount($options)
{
   $this->options = $options;
}

public function render()
{
    return view('livewire.test-options', [
        'options' => $this->options
    ]);
}

部件叶片

<div>

@foreach($options['items'] as $option_items)
    <div class="custom-control custom-radio">
       <input 
             wire:model="selected" 
             class="custom-control-input" 
             type="radio"
             id="rdio_{{$option_items['0']->id}}_{{$options['option']->id}}">

             <label class="custom-control-label" for="rdio_{{$option_items['0']->id}}_{{$options['option']->id}}">{{$option_items['0']->title}}</label>
   </div>
@endforeach

Answer 1

问题是，当您选择收音机时，Livewire正在刷新组件。但是，$options数组不会再次被传递。只有在组件首次呈现时mount()才会运行。

您已经将选项传递到组件中，不需要挂载$optons变量，因为它已经在这里加载和设置：

@livewire('test-options', ['options' => $option])

将代码更改为：

class TestOptions extends Component {

public $selected;
public $options;


public function render()
{
    
    return view('livewire.test-options', [
        'options' => $this->options
    ]);
}

如果您还试图从无线电输入中获得一个值，则需要添加一个值：

<input 
    wire:model="selected" 
    class="custom-control-input" 
    type="radio"
    value="yourvaluehere"
    id="rdio_{{$option_items['0']->id}}_{{$options['option']->id}}">

在Livewire组件中，您可以使用挂载()代替类构造函数__construct()，就像您可能习惯的那样。注意:只有在组件第一次挂载时才被调用，即使组件被刷新或重命名，也不会再次调用。

在这里阅读更多信息：接收参数