在Laravel中使用Alpine Js/Javascript为表单字段分配id+索引值以进行操作

Question

环境：Laravel 9，Alpine Js，TailWinds CSS，Vanilla Js

当用户输入"0"时，我试图在表单字段中进行值替换；to inch或"to ft"。我在页面中实现了"添加另一行"功能，最终为我提供了多个具有相同id的字段。

我不知道如何突出显示特定的代码行，所以我添加了<！--此处---->(2个位置)到下面的描述字段代码。。。

<!--  PO Lines Below  -->
<!--  Row 1 Fields  -->
<div class="row" x-data="handler()">
<div class="col">
<template x-for="(field, index) in fields" :key="index">
<div id="po_line" class="my-4">
Line: <strong x-text="index + 1"></strong>
<label for="qty">Qty: </label>
<input x-model="field.qty" type="number" class="form-control rounded-lg text-sm" name="qty[]" value="" style="width:90px" />
<label for="part_num" class="ml-3">Part #: </label>
<input x-model="field.part_num" type="text" class="form-control rounded-lg text-sm" name="part_num[]" value="" style="width:200px"   />
<label for="descrip" class="ml-3">Descrip: </label>
<!-- HERE ---->    <input x-model="field.descrip" type="text" class="form-control rounded-lg text-sm" name="descrip[]" value="" style="width:300px"  id="descrip_id"   onblur="replaceQuotes()" />
<label for="cost" class="ml-3">Cost: </label>
<input x-model="field.cost" type="number" class="form-control rounded-lg text-sm" name="cost[]" value=""  style="width:110px"  step="0.01" min = "0"  />
<a href="#scroll" class="bg-red-600 hover:bg-red-500 text-white h-9 py-1 px-2 rounded-lg inline-flex items-center"  @click="removeField(index)">
<i class="fa-solid fa-trash mx-1" style="font-size: 0.9rem;"></i>
</a>
</div>
<!--  Row 2 Fields  -->
<div id="po_line" class="my-4">
Line: <strong x-text="index + 1"></strong>
<label for="qty">Qty: </label>
<input x-model="field.qty" type="number" class="form-control rounded-lg text-sm" name="qty[]" value="" style="width:90px" />
<label for="part_num" class="ml-3">Part #: </label>
<input x-model="field.part_num" type="text" class="form-control rounded-lg text-sm" name="part_num[]" value="" style="width:200px"   />
<label for="descrip" class="ml-3">Descrip: </label>
<!-- HERE ---->   <input x-model="field.descrip" type="text" class="form-control rounded-lg text-sm" name="descrip[]" value="" style="width:300px" id="descrip_id"     onblur="replaceQuotes()" />

<label for="cost" class="ml-3">Cost: </label>
<input x-model="field.cost" type="number" class="form-control rounded-lg text-sm" name="cost[]" value=""  style="width:110px"  step="0.01" min = "0"  />
<a href="#scroll" class="bg-red-600 hover:bg-red-500 text-white h-9 py-1 px-2 rounded-lg inline-flex items-center"  @click="removeField(index)">
<i class="fa-solid fa-trash mx-1" style="font-size: 0.9rem;"></i>
</a>
</div>

有问题的代码行是这样的：

<label for="descrip" class="ml-3">Descrip: </label>
<input x-model="field.descrip" type="text" class="form-control rounded-lg text-sm" name="descrip[]" value="" style="width:300px" id="descrip_id"     onblur="replaceQuotes()" />

以下是replaceQuotes()的工作javascript代码-仅适用于第一个实例

<script>
<!-- Replace Quotes in Form -->
function replaceQuotes() {

var x = document.getElementById("descrip_id");

x.value = x.value.replace(/"/g, " inch ")
x.value = x.value.replace(/'/g, " ft ")
<!-- Add a row of fields -->
function handler() {
return {
fields: [],
addNewField() {
this.fields.push({
qty: '',
part_num: '',
descrip: '',
cost: ''
});
},
removeField(index) {
this.fields.splice(index, 1);
}
}
}
}
</script>

该代码使用REGEX匹配来代替"；带英寸和带英尺

此代码在第一个id＝'description_id上运行良好，它是id＝'dscript_id的第一行或第一个实例。但在任何后续行上都不会更改。

我尝试连接第#行的索引，该行使用Alpine JS x-text。

我也尝试过在函数中传递this.id，比如replaceQuotes(this.id)，然后在函数中添加一个id参数，但都无法实现。

所以问题是：

1)如何将索引连接到id='description_id'上以获得唯一的id，如id='descape_id_1'

我试过id＝'description_id'<x-text＝"；索引">并且id＝'descape_id'+<x-text＝"；索引">

我假设我只需要通过函数调用传递索引？

-或-

2)如何将活动ID传递给函数，并让它仅操作CURRENT descript_ID字段中的数据

还尝试了replaceQuotes(this.id)，然后在Javascript函数replaceQuote(id)和replaceQuotes($id)中，x被分配给函数体中的id。

谢谢！

Answer 1

在Alpine.js属性中，您可以使用任何js(但不能像您尝试的那样使用HTML)。因此，创建动态id属性的正确方法只是使用模板文字并将活动项的索引传递给replaceQuotes函数。

<input x-model="field.descrip" 
type="text" 
class="form-control rounded-lg text-sm"
name="descrip[]" 
value="" 
style="width:300px" 
:id="`descrip_id${index}`" 
@blur="replaceQuotes(index)" />

<script>
function replaceQuotes(id) {
var x = document.getElementById(`descrip_id${id}`)
x.value = x.value.replace(/"/g, " inch ")
x.value = x.value.replace(/'/g, " ft ")
}
</script>