Question

73

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

rated 0 times [ 75] [ 2] / answers: 1 / hits: 25702 / 5 Years ago, tue, december 17, 2019, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenkamis

Add To Favorites

Follow

Total Points: 172

Total Questions: 93

Total Answers: 103

Location: Wales

Member since Mon, May 17, 2021

3 Years ago

havenkamis questions

1 Add a link to a text within the text - React Native

Mon, Sep 13, 21, 00:00, 3 Years ago

1 Get value from < select> (dropdown) in React JS

Tue, Apr 6, 21, 00:00, 3 Years ago

1 How many props is recommended in a React component?

Fri, Oct 16, 20, 00:00, 4 Years ago

1 How to solve CORS Origin issue when trying to get data of a json file from localhost

Wed, Sep 30, 20, 00:00, 4 Years ago

1 Angular way to stop negative values from being entered in input type number (on copy-paste & increase, decrease) also

Fri, Jul 3, 20, 00:00, 4 Years ago

View All

answered 5 Years ago patriciakiarrac · Accepted Answer

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