从输入元素中获取参数，但如何在vue.js中使用？

Question

我知道如何从输入元素中获取值。

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

我想使用url变量来获得这样的页面：

<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>

但不起作用。url变量为null。在控制台中，它的打印方式如下：

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版本: 2.5.17

Answer 1

1. 您没有将数据发送到open方法，但我建议使用this.url来获取方法内的值。

要么使用

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

1. 在任何本地服务器中直接从D驱动器运行应用程序