如何将JavaScript中的值绑定到Laravel Blade视图input输入框的value属性

你只需要在事件回调中根据返回的ID匹配到对应DOM元素，再给value属性赋值即可，两种常用写法如下：

1. 原生JavaScript实现 #

channel.bind('App\Events\ValueChange', function(data){
    const targetId = data.id;
    const newValue = data.value;
    // 注意：如果后端返回的data.id是外层div的id1，需要把选择器改成 document.querySelector(`#${targetId} input`)
    const targetInput = document.getElementById(targetId);
    // 元素存在才赋值，避免控制台报错
    if (targetInput) {
        targetInput.value = newValue;
        // 如果需要同步触发input、change事件给其他监听逻辑用，可以加下面这句
        targetInput.dispatchEvent(new Event('input'));
    }
});

提示：你当前input上的data-readOnly="true"是自定义属性，不会影响赋值操作，如果要设置原生只读效果可以把属性改成readonly。

2. jQuery实现（项目引入jQuery的话可以用） #

channel.bind('App\Events\ValueChange', function(data){
    const targetId = data.id;
    const newValue = data.value;
    // 同样如果data.id是外层div的id，选择器改成 `#${targetId} input` 即可
    $(`#${targetId}`).val(newValue).trigger('input');
});

内容的提问来源于stack exchange，提问作者KovidaK