Vue3如何获取HTML元素内容并传入表单提交至后端？

最优方案：直接复用响应式计算逻辑（不操作DOM） #

Vue是数据驱动框架，你页面上h2的内容是基于price和counter计算出来的，完全不需要去读取DOM元素的内容，直接把计算结果绑定到表单对象里即可，这是最符合Vue设计理念的做法。

比如你的组件中应该已经定义了响应式的price和counter：

import { ref, computed, watch } from 'vue';
import { useForm } from '@vueuse/core'; // 假设你用的是@vueuse的useForm

setup(props) {
    const price = ref(100); // 示例价格
    const counter = ref(2);  // 示例数量

    // 计算原价总价
    const totalPrice = computed(() => price.value * counter.value);
    // 计算折扣后总价（如果需要）
    const salePrice = computed(() => price.value * counter.value * 0.8);

    // 初始化表单时直接传入计算值
    const form = useForm({
        name: props.user.name,
        totalPrice: totalPrice.value,
        salePrice: salePrice.value,
        // 其他表单字段...
    });

    // 后续price或counter变化时，同步更新表单字段
    watch([price, counter], () => {
        form.totalPrice = totalPrice.value;
        form.salePrice = salePrice.value;
    });

    return {
        price,
        counter,
        totalPrice,
        salePrice,
        form
    };
}

对应的模板直接使用计算属性即可，和表单数据完全同步：

<h2 v-else>{{ totalPrice }}$</h2>
<!-- 折扣版本 -->
<h2 id="saleCount">{{ salePrice }}</h2>

特殊场景下的DOM操作方案（不推荐） #

如果确实有特殊需求必须读取DOM元素的内容（比如内容是第三方插件生成的，无法通过数据获取），可以用Vue的ref获取DOM元素：

1. 在模板中给元素绑定ref：

<h2 v-else ref="totalPriceEl">{{ price * counter }}$</h2>
<h2 id="saleCount" ref="salePriceEl">{{ price * counter * 0.8 }}</h2>

2. 在setup中获取ref并读取内容：

import { ref, onMounted, watch, nextTick } from 'vue';
import { useForm } from '@vueuse/core';

setup(props) {
    const totalPriceEl = ref(null);
    const salePriceEl = ref(null);
    const price = ref(100);
    const counter = ref(2);

    const form = useForm({
        name: props.user.name,
        totalPrice: '',
        salePrice: '',
        // 其他字段...
    });

    // 组件挂载后读取初始内容
    onMounted(() => {
        if (totalPriceEl.value) {
            form.totalPrice = totalPriceEl.value.textContent.trim();
        }
        if (salePriceEl.value) {
            form.salePrice = salePriceEl.value.textContent.trim();
        }
    });

    // 内容动态变化时，等待DOM更新后重新读取
    watch([price, counter], () => {
        nextTick(() => {
            if (totalPriceEl.value) {
                form.totalPrice = totalPriceEl.value.textContent.trim();
            }
        });
    });

    return {
        totalPriceEl,
        salePriceEl,
        price,
        counter,
        form
    };
}

注意：这种方法容易出现数据不同步的问题，只有在无法通过数据驱动实现时才建议使用。

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