jquery - 从 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');
});

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

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

Answer 1

默认情况下，文本输入上的 v-model 会监听 native input 事件以同步 View 模型。您可以像以前那样设置值，然后触发 native 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);
});

这是一个工作 fiddle :https://jsfiddle.net/548jofad/