从 jQuery 更新 Vue 模型

Question

这是我的 Vue 代码：

<div id="root">
    <input v-model="title" name="title" />
    <div class="my-title">{title}</div>
</div>

我需要在单击 jQuery 中的按钮后更改输入值（我无法更改这部分），如下所示：

$('.button').on('click', function() {
    $("input[name='title']").val('some new value');
});

这按预期工作，浏览器中显示的输入值现在是some new value，但消息my-title div未更新。

关于如何更新它有什么想法吗？

Answer 1

默认情况下，文本输入上的 v-model 监听本机input事件以同步视图模型。您可以像以前一样设置该值，然后只需触发本机input事件即可更新模型中的值。

$('.button').on('click', function() {
  
  // Find inputs
  const input = $("input[name='title']");

  // Set value
  input.val('some new value');

  // Create native event
  const event = new Event('input', { bubbles: true });

  // Dispatch the event on "native" element
  input.get(0).dispatchEvent(event);
});

这是一个工作小提琴：https://jsfiddle.net/548jofad/