Collecting and storing HTML elements-CodePudding

How do i collect the value of a p-tag and store it in vue?

<p id="idNum">{{lesson._id}}</p>

CodePudding user response：

const value = document.querySelector('p#idNum').textContent

CodePudding user response：

Working Demo :

new Vue({
  el: '#app',
  data() {
    return {
        lesson: {
            _id: 123
        },
      paragraphValue: ''
    }
  },
  mounted() {
    this.paragraphValue = document.getElementById('idNum').innerHTML;
    console.log(this.paragraphValue);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p id="idNum">{{ lesson._id }}</p>
</div>

CodePudding user response：

why don't you try to directly reach the lesson._id var ?

CodePudding user response：

use ref instead of id and you can call it like console.log(refs["idNum"])

<p ref="idNum">{{lesson._id}}</p>

Do not forget to import ref from vue

CodePudding user response：

If you wrote code like, you're binding value of lesson._id inside of <p> tag. So you already have access to lesson._id from code.

If your question is how do you get value from from html element, for example:

<p>someValue</p>

if you want to get "someValue", best choice is to use refs https://v3.vuejs.org/guide/component-template-refs.html

Avoid accessing "document." in vue