根据php中的复选框添加和减去值

Question

我有一个简单的复选框表单，它有三个选项。我想动态计算价格，我没有将这些值存储在数据库中。

<div class="custom-control custom-checkbox">
<input type="checkbox"id="option1" wire:click="test" wire:model="additions" value="option1">
<label class="custom-control-label" for="option1">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="option2" wire:click="test" wire:model="additions" value="option2">
<label class="custom-control-label" for="option1">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="option3" wire:click="test" wire:model="additions" value="option3">
<label class="custom-control-label" for="option1">Option 3</label>
</div>

在blade文件中显示值 的输出

{{ $checkout }}

每个选项都有不同的价格，我将$checkout相加以计算总价格。

public $additions = [];
public $checkout = 0;
public function test()
{
// if (in_array('option1', $this->additions)) {
//     $this->checkout =+ 10;
//     Log::info($this->checkout);
// }
// if (in_array('option2', $this->additions)) {
//    $this->checkout += 10;
//     Log::info($this->checkout);
// }
// if (in_array('option3', $this->additions)) {
//     $this->checkout += 10;
//     Log::info($this->checkout);
// }
if (!empty($this->additions)) {
foreach ($this->additions as $key => $value) {
if ($value == 'option1') {
$this->checkout += 10;
}
if ($value == 'option2') {
$this->checkout += 10;
} else {
$this->checkout -= 10;
}

if ($value == 'option3') {
$this->checkout += 10;
} else {
$this->checkout -= 10;
}        
}
Log::info($this->checkout);
}
}

价格增加了，但不正确。在这个例子中，我每个选项都有10，所以当所有三个选项都被选中时，总数将是30，当两个选项被选中时，总数将是20，以此类推。我得到的都是60岁以上的，离30岁远着呢。

任何帮助都将是感激的。

编辑:$this->additions包含所有检查项。例如:如果三个选项都被选中，$this->additions将会有option1,option2,option3在数组中。

Answer 1

首先，您的Blade视图应该只有一个根元素，因此您应该将整个内容包装在<div>标记中。这是一个Livewire的东西，它相当重要，因为它使Livewire更容易进行dom区分。
其次，您不需要同时使用wire:click和wire:model，因为您可以单独使用wire:model并通过updated()生命周期钩子侦听绑定字段的更新-或者通过updatedAdditions()专门侦听additions属性。

然后，当您执行您的操作时，您应该为每次迭代重置计数器并避免减法-否则，您将为每次单击增加结账计数器-这是您现在看到的部分内容。

这里更好的选择是使用包含每个选项值的查找数组，并对其进行聚合。

<div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="option1" wire:model="additions" value="option1">
<label class="custom-control-label" for="option1">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="option2" wire:model="additions" value="option2">
<label class="custom-control-label" for="option1">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="option3" wire:model="additions" value="option3">
<label class="custom-control-label" for="option1">Option 3</label>
</div>
{{ $checkout }}
</div>

class Checkout extends Component
{
public $additions = [];
public $checkout = 0;
public function updatedAdditions($value)
{
// Declare valid options and the value they increment
$optionValues = [
'option1' => 10,
'option2' => 10,
'option3' => 10,
];
// Reset the counter before we iterate over the current additions
$this->checkout = 0;
// Iterate over additions, and find the value from $validOptions
// If it doesn't exist in $validOptions, default to 0 (adding 0 makes no difference)
foreach ($this->additions as $key => $value) {
$this->checkout += $optionValues[$value] ?? 0;
}
}
public function render()
{
return view('livewire.checkout');
}
}