How to navigate to intra page link by button click on vuejs form

Question

I have a intralink on a page:

<h3 id="report">Preview Report</h3>

and when I submit form I call the method as shown below

methods: {
        generateReport: function(link) {
            console.log(link);
            window.location.href = "report"
        }

    }

instead of scrolling down below to to where intra page link report is it navigates to a different page (default homepage)

What do you mean by intra page link ,a link element on the same page ? if you want to just scroll to an element in the page use scrollIntoView or if you want to have a hased url link to the element so that on refresh the scroll position is maintained you can change the url hash and Section Two and have a hash for the element ID — Sainath S.R, Dec 22 '18 at 13:59

score 0 · Answer 1 · answered Dec 22 '18 at 14:02

0

<h3 id="report" ref="report-link">Preview Report</h3>


methods: {
        generateReport: function(link) {
            console.log(link);
            $ref['report-link'].scrollIntoView()
             //or if you are receiving the link element dom itself as the param //just use
            link.scrollIntoView()


        }

    }

answered Dec 22 '18 at 14:02

Sainath S.R

3,074
9
41
72

if I use `$ref['report-link'].scrollIntoView()` then I get error `ReferenceError: Can't find variable: $ref` if I use the `link.scrollIntoView()` then I get error: TypeError: link.scrollIntoView is not a function. (In 'link.scrollIntoView()', 'link.scrollIntoView' is undefined) – Ciasto piekarz Dec 22 '18 at 14:16
$refs['ref-name'] sorry typo , try this – Sainath S.R Dec 22 '18 at 14:18
`this.$refs['report-link']` – Roy J Dec 22 '18 at 15:14

How to navigate to intra page link by button click on vuejs form

1 Answers1