Get parameter from input element but how to use in vue.js?

Question

I known how to get value from input element.

<div id="app-6">
<p>{{ url }}</p>
<input v-model="url">
</div>
<script>
new Vue({
    el: '#app-6',
    data: {
        url: ''
    }
})
</script>

And I want to use url variable to get page like this:

<div id="app-6">
    <input v-model="url">
    <input type="submit" v-on:click="open">
    <p>{{ result }}</p>
</div>
<script>
new Vue({
    el: '#app-6',
    data: {
        url: '',
        result: ''
    },

    methods : {
        open: function (data) {
            var url = data.url
            this.$http.get('http://httpbin.org/ip', (data) => {
                this.result = data.origin
            }).error(function (data, status, request) {
                //handler error
            })
        }
    }
})
</script>

But it doesn't work. The url variable is null. In console, it print like this:

Access to XMLHttpRequest at 'file:///D:/serialshow/vuetest.html' from 
origin 'null' has been blocked by CORS policy: Cross origin requests 
are only supported for protocol schemes: http, data, chrome, chrome- 
extension, https.

Vue version: 2.5.17

Answer 1

1. You are not sending data to open method, but I suggest to use this.url to get value inside method

Either use

 open: function () {
        var url = this.url;

2. Run your application in any local server instead directly from D drive