Alpine JS x-model 和 php 解析值

Question

有没有办法告诉 Alpine Js 在从 php 传递值时更新其模型信息？

在这种情况下，id 保持为 0，load_id 和 order_num 保持为空字符串，直到用户手动更改值，即使元素具有与 php 不同的值。

<div class="row" x-data="Load()" x-on:input.debounce="saveRow()">
  <div>
    <input type="text" value="<?= $load->id ?>" disabled x-model="id" />
    <input type="text" value="<?= $load->load_id ?>" x-model="load_id" />
    <input type="text" value="<?= $load->order_num ?>" x-model="order_num" />
  </div>
</div>

    function Load(){
        return {
            id: 0,
            load_id: "",
            order_num: "",
            
            saveRow(){      
                const self = this;
                $.ajax({
                    method: "POST",
                    url: "/harmonogram-api.php",
                    data: {
                        method: "saveTransport",
                        id: self.id,
                        load_id: self.load_id,
                        order_num: self.order_num,
                    }
                }).done(function(response){

                });
            }
        }
    }

Answer 1

如果 Load() 组件在同一页面上，那么您可以将默认值放在那里：

function Load(){
    return {
        id: "<?= $load->id ?>",
        load_id: "<?= $load->load_id ?>",
        order_num: "<?= $load->order_num ?>",
        
        // ...
    }
}

如果Load()组件在外部文件中，那么您可以使用x-init directive设置默认值：

<div class="row" 
     x-data="Load()" 
     x-init="id = '<?= $load->id ?>'; load_id = '<?= $load->load_id ?>'; order_num = '<?= $load->order_num ?>'"
     x-on:input.debounce="saveRow()">
  <div>
    <input type="text" value="<?= $load->id ?>" disabled x-model="id" />
    <input type="text" value="<?= $load->load_id ?>" x-model="load_id" />
    <input type="text" value="<?= $load->order_num ?>" x-model="order_num" />
  </div>
</div>

Alpine JS x-model 和 php 解析值

Alpine JS x-model and php parsed value

php

alpine.js