Vue3 get div content and post it to form

July 25, 2022

Good afternoon, sorry for the stupid question.
I need to get content from h1 or p or something else and pass it to the form vue and post it to the backend, how can this be done?

I know how to do it through the input and in the v-model, but how to get the values from the div content?
I have form:

setup(props) {
    const form = useForm({
        name: props.user.name,
....
    });

And i have this HTML code, how i can get data from:

<h2 v-else >{{ price * counter }}$</h2>

<h2 id="saleCount"{{ price * counter * (100 - 20) / 100}}</h2>

and put it to my const form?

>Solution :

It seems like you are outputting js content to the template using {{}} syntax. It would be by far the easiest to just use those values directly in your script.

However, if you have something that’s directly in template such as:

<h1>My Heading in Template</h1>

and you want that value, I suggest using template refs:

<script setup>
import { onMounted, ref } from 'vue';

const myHeading = ref(null);

onMounted(() => {
  console.log(myHeading.value.innerText); //this will print "My Heading in Template"
});
</script>

<template>
  <h1 ref="myHeading">My Heading in Template</h1>
</template>