使用 Alpine Js / Javascript in Laravel 将 id+index 值分配给表单字段以进行操作

Question

环境： Laravel 9, 高山JS， TailWinds CSS、原版 Js

我正在尝试在用户输入 " 到英寸或 ' 到 ft 时在表单字段中进行值替换。我已经在页面上实现了 'add another row' 功能，最终给我 具有相同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 匹配将 " 替换为 inch，将 ' 替换为 ft。

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

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

我也试过像 replaceQuotes(this.id) 这样在函数内部传递 this.id ，然后在函数内部添加一个 id 参数，但两者都不起作用。

所以问题是：

1) 如何将索引连接到 id='descrip_id' 以获得唯一的 id，例如 id='descrip_id_1' ?

我试过 id='descrip_id'. 和 id='descrip_id'+

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

-或-

2) 如何将活动 ID 传递给函数并让它仅处理当前 descrip_id 字段中的数据？

也尝试过，replaceQuotes(this.id) 然后在 Javascript 函数 replaceQuotes(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>

使用 Alpine Js / Javascript in Laravel 将 id+index 值分配给表单字段以进行操作

Assigning a id+index value to a form field for manipulation using Alpine Js / Javascript in Laravel

javascript

php

alpine.js

laravel-9