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

您不是要向open方法发送数据，但我建议使用this.url在方法内部获取价值

可以使用

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

直接在D盘上直接在任何本地服务器上运行应用程序

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

1 个答案: