Using Vue.js to get the user's IP Address

Question

My website looks up different IP Addresses to see if they are a known threat. I am putting a button in that is linked through Vue.js and on click, I want it to push the user's IP Address to the input box. I am having a lot of trouble trying to get the user's ip address.

In addition, I do not want any jquery since there is an error thrown whenever I try to use it.

This is an abridged version of my js code:

let app = new Vue({
    el: '#app',
    data: {
    term: localStorage.getItem("searchTerm")
    },
    methods: {
     showYourIP()
    {
      this.term = //User's IP Address
    }
}});

Html that calls it is:

<button class="button" id="yourIP" @click="showYourIP">Show Your IP</button>

Here is a link to my site so it's easier to understand what I'm trying to do: https://people.rit.edu/sns9181/igme330/Threat-Visualizer/

You can look through my whole code there by right clicking and inspecting the page if that is easier.

Answer 1

This question is about JS and "how get client's IP in JS", not about Vue ;)

But to the point: You should fetch ip from some api, eg https://www.ipify.org/ When you send request to https://api.ipify.org?format=json, you get JSON like that

{"ip":"257.1.1.1"}

Look at this

fetch('https://api.ipify.org?format=json')
.then(x => x.json())
.then(({ ip }) => {
    this.term = ip;
});

Put it into showYourIp method