我如何通过form元素的Dom对象在Vue 3中找到元素V-model绑定的值并修改它

jfgube3f 于 2023-11-21 发布在 Vue.js

关注(0)|答案(1)|浏览(179)

我正在编写一个基于Vue 3的插件，现在我需要一个明显不是Vue 3 API一部分的功能，我认为这需要一些Vue 3源代码的知识来做到这一点，这里是所需功能的描述：
假设您有以下代码片段：

<div class="box">
    <input type="text" v-model="state.text">
</div>

<script>
    const {createApp, reactive} = Vue
    const vm = createApp({
        setup ()
        {
            const state = reactive({
                text: "123"
            })

            return {
                state
            }
        }
    }).mount(".box")
</script>

字符串
基于这个代码片段，我需要通过input元素的dom对象在Vue外部修改v-model值。我该怎么做？

const input_dom = document.querySelector("input")

// I have obtained the input_dom, and I hope to change the value of state.text through input_dom.

input_dom??

型

vue.js

来源：https://stackoverflow.com/questions/77387591/how-i-found-the-value-of-the-element-v-model-binding-in-vue3-through-the-dom-obj

1条答案

按热度按时间

klsxnrf11#

Vue 3中有未记录的__vue_app__等属性，但它们用于调试，可能在生产构建中不可用。
一个很好的做法是显式公开公共API。如果需要更改字段值，那么使用方法进行更改将更容易调试和维护。

document.querySelectorAll(".box").forEach(el => {
  const app = createApp({
    setup (props, ctx) {
      ...
      ctx.expose({
        update(val) {
          state.text = val;
        }
      });
    }
  });
  el.myApp = app.mount(el);
});

字符串
使用方式如下：

document.querySelector(".box").myApp.change(...);

型
对于单个应用示例，它可以是全局变量，因为它更容易跟踪和调试：

window.myApp = app.mount("#box")

型

赞(0）回复(0）举报 2023-11-21

我来回答

我如何通过form元素的Dom对象在Vue 3中找到元素V-model绑定的值并修改它

1条答案

相关问题

热门标签

最新问答