刀片中显示不同组件的简单脚本

Question

我已经很久没有使用Laravel了，我想在不同的点击中显示不同的刀片组件。在gridFirst中，我希望用户选择一个选项，class="firstgridItem"中的一个项目。有人能向我解释一下如何实现这样的点击来渲染特定组件的基本知识吗？也许这样我也会学习如何/为什么不实现我自己的Javascript选项/变量/方法等，因为我不知道在哪里存储或如何访问它们？

<section class="grid">
<div class="gridFirst">
<h1 class="gridTitle">VIPDECK</h1>
<div>
<div class="firstgridItem" id="koppelen-link">
<p>BRIL KOPPELEN</p>
<p>></p>
</div>
<div class="firstgridItem" id="bestellingen-link">
<p>OVERZICHT BESTELLINGEN</p>
<p>></p>
</div>
<div class="firstgridItem" id="klanten-link">
<p>OVERZICHT KLANTEN</p>
<p>></p>
</div>
</div>
</div>
<div class="gridMid">
@if ("koppelen"==="koppelen")
<x-klanten-brillen />
@elseif (2===2)
<x-bestellingen-overzicht />
@endif
</div>
<div class="gridLast">
@if (2===1)
<x-klanten-brillen />
@elseif (2===2)
<x-bestellingen-overzicht />
@endif
</div>
</section>

我已经在gridMid中使用了一些if语句，我可以让它们显示不同的组件，只是不在不同的(Javascript？(变量上。

Answer 1

我不明白2===1是如何的，也不明白为什么要检查2===2，但这个例子展示了如何将东西附加到div中。如果你有带选项的select，但在问题中没有提到，请添加它，并让我知道添加从控制器中选择或检索json数据的例子。

<section class="grid">
<div class="gridFirst">
<h1 class="gridTitle">VIPDECK</h1>
<div>
<div class="firstgridItem" id="koppelen-link">
<p>BRIL KOPPELEN</p>
<p>></p>
</div>
<div class="firstgridItem" id="bestellingen-link">
<p>OVERZICHT BESTELLINGEN</p>
<p>></p>
</div>
<div class="firstgridItem" id="klanten-link">
<p>OVERZICHT KLANTEN</p>
<p>></p>
</div>
</div>
</div>
<div class="gridMid" id="mid"></div>
<div class="gridLast" id="last"></div>
</section>

<script>
$(document).ready(function () { 
let koppelen = "koppelen";

if(koppelen === "koppelen")
{
$("#mid").append('<x-klanten-brillen />');
} else if(2 === 2)
{
$("#mid").append('<x-bestellingen-overzicht />');
$("#last").append('<x-bestellingen-overzicht />');
} else if(2 === 1)
{
$("#last").append('<x-klanten-brillen />');
}           
});
</script>