vue-resource 相关问题

Vue.js的HTTP客户端插件，用于使用XMLHttpRequests或JSONP管理Web请求和响应

这是我的vue js脚本，使用ajax请求获取json数据新的Vue({ el: '#feed' , 数据： { 细节： []， }, 安装（）{ this.$nextTick(函数() { ...</desc> <question vote="2"> <p>这是我的vue js脚本，使用ajax请求获取json数据</p> <pre><code> <script> new Vue({ el: '#feed' , data: { details: [], }, mounted() { this.$nextTick(function() { var self = this; var id = window.location.href.split('=').pop() console.log(id) $.ajax({ url: "https://", method: "GET", dataType: "JSON", success: function (e) { if (e.status == 1) { self.details = e.data; console.log(e.data) } else { console.log('Error occurred');} }, error: function(){ console.log('Error occurred'); } }); }) }, }) </script> <script> export default { name: 'google-map', props: ['name'], data: function () { return { mapName: this.name + "-map", markerCoordinates: [{ latitude: 51.501527, longitude: -0.1921837 }], map: null, bounds: null, markers: [] } }, mounted: function () { this.bounds = new google.maps.LatLngBounds(); const element = document.getElementById(this.mapName) const mapCentre = this.markerCoordinates[0] const options = { center: new google.maps.LatLng(mapCentre.latitude, mapCentre.longitude) } this.map = new google.maps.Map(element, options); this.markerCoordinates.forEach((coord) => { const position = new google.maps.LatLng(coord.latitude, coord.longitude); const marker = new google.maps.Marker({ position, map: this.map }); this.markers.push(marker) this.map.fitBounds(this.bounds.extend(position)) }); } }; </script> <style scoped> .google-map { width: 800px; height: 600px; margin: 0 auto; background: gray; } </style> </code></pre> <p>我收到错误 Uncaught SyntaxError: Unexpected token export.. 我不知道如何解决同样的问题。请帮我解决</p> <p>这是我的 html 代码，用于显示所有 JSON 数据</p> <pre><code><div class="m-single-article" id="feed"> <p>{{details.businessName}}</p> <p>{{details.pid}}</p> <p v-for="inv in details.inventory">{{inv}}</p> <p v-for="sub in details.sub_category">{{sub}}</p> <div class="google-map" :id="mapName"></div> </div> </code></pre> <p>但是我遇到了错误。谁能帮我解决我的问题。我怎样才能让纬度和经度显示在谷歌地图上。我是 vue js 的初学者。请帮我解决这个问题。</p> <p>还有其他方法可以使用谷歌地图 API 解决同样的问题吗？请帮助我找到解决方案我的js小提琴链接不添加谷歌地图是<a href="https://jsfiddle.net/kzc26bgs/1/" rel="nofollow noreferrer">https://jsfiddle.net/kzc26bgs/1/</a></p> </question> <answer tick="true" vote="2"> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>function initMap() { var c = [{"status": true, "data": {"pid": 5, "businessName": "Xavier Tailoring shop", "services": "All kind of stitching works", "inventory": [], "workHr": "Monday :9:00AM to 20:0PM,Thuesday :9:00AM to 20:0PM,Wednesday :9:00AM to 20:0PM,Tuesday : 9:00AM to 20:0PM,Friday :9:00AM to 20:0PM,Saturday :9:00AM to 20:0PM,Sunday :9:00AM to 20:0PM", "description": "All kind of stitching works", "category": 11, "sub_category": ["Veg Hotel"], "lat": 9.52436859, "lon": 76.82810117, "contactName": "xavier", "contactEmail": "<a href="/cdn-cgi/l/email-protection" data-cfemail="82eae3f0ebf1fae3f4ebe7f0c2e5efe3ebeeace1edef">[email protected]</a>", "contactOfficeAddress": "koovapally perubara road", "contactNumber": "8592808201", "contactOfficeNumber": "8592808201", "state": "Kerala", "city": "Koovappally", "place": "Kanjirapally - Erumely Road", "pincode": 686518, "referer": 24, "link": 31, "views": 0, "package": 1, "listing_pic": "default", "website": "example.com"}}]; var myLatLng = {lat:c[0].data.lat , lng:c[0].data.lon }; var map = new google.maps.Map(document.getElementById('mapName'), { zoom: 4, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' }); }</code></pre> <pre><code><div id="mapName" style="width:267px; height: 270px" />  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AddKEY&callback=initMap"> </script></code></pre> </div> </div> <p></p> <pre><code>var options = { zoom: 6, center: new google.maps.LatLng(12.92, 77.25), // Centered mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false }; // Init map var map = new google.maps.Map(document.getElementById('dvMap'), options); $.post("${pageContext.request.contextPath}/getorderlist.htm", { aa : aa, output : output, }, function(data) { }).done(function(data) { //alert(data); var json = JSON.parse(data); //console.log( json); for (var i = 0; i < json.length; i++) { var png='http://maps.google.com/mapfiles/ms/icons/blue-dot.png'; // Init markers var marker = new google.maps.Marker({ position: new google.maps.LatLng(json[i].lat , json[i].lon), map: map, title: 'Click Me ' + i, icon:png }); // Process multiple info windows (function(marker, i) { // add click event google.maps.event.addListener(marker, 'click', function() { infowindow = new google.maps.InfoWindow({ content: json[k][i].address }); infowindow.open(map, marker); }); })(marker, i); } }).fail(function(xhr, textStatus, errorThrown) { }).complete(function() { $("#btn-save").prop("disabled", false); }); </code></pre> </answer> </body></html>

javascript jquery vue.js vue-component vue-resource

回答 0 投票 0

有什么方法可以“监视”Vuejs 中的本地存储吗？

我正在尝试监视本地存储：模板：令牌 - {{令牌}} 脚本：计算：{ 令牌（）{ return localStorage.getItem('token'); } } 但它并没有改变...

javascript vue.js vuejs2 vue-component vue-resource

回答 7 投票 0

即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头，也会出现 CORS 错误

我有一个使用 webpack-simple 选项生成的 Vue 应用程序。我正在尝试向 https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en 发出 GET 请求，但出现错误...

webpack cors vue.js webpack-dev-server vue-resource

回答 3 投票 0

VueJS 读取 Dom 属性

我想获取按钮点击事件的href属性。获取数据我想获取按钮点击事件的href属性。 <a v-on:click.prevent="func($event)" href="/user/all/2"> <i class="fa fa-edit"></i> <span>Get Data</span> </a> 主要.JS文件 new Vue({ el: 'body', methods: { func: function (event) { element = event.target; console.log(element); // Output : Select span|i|a element href = element.getAttribute('href'); }, } }); 目标事件未选择元素。它选择单击的元素。您想要event.currentTarget，而不是event.target。这是情况的一个小提琴：https://jsfiddle.net/crswll/553jtefh/ 这就是“Vue 方式”。 Vue 是关于可重用组件的。所以，首先创建组件： <script src="https://unpkg.com/vue"></script> <div id="app"> <my-comp></my-comp> </div> <script> // register component Vue.component('my-comp', { template: '<div>Just some text</div>' }) // create instance new Vue({ el: '#app' }) </script> 现在添加自定义属性并读取其值： <script src="https://unpkg.com/vue"></script> <div id="app"> <my-comp my-attr="Any value"></my-comp> </div> <script> Vue.component('my-comp', { template: '<div>aaa</div>', created: function () { console.log(this.$attrs['my-attr']) // And here is - in $attrs object } }) new Vue({ el: '#app' }) </script> var app = { func: function(event) { console.log(event.currentTarget.id); //this will get whole html tag console.log(event.currentTarget.href); //this will show href value } } // Apps var app_vue = new Vue({ data: app, }).$mount("#app_vue"); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app_vue" v-cloak class="card"> <a v-on:click.prevent="func" href="/user/all/2"> <i class="fa fa-edit"></i> <span>Get Data</span> </a> </div>

javascript vue.js vue-resource vue-component

回答 3 投票 0

访问承诺中的数组值

我已经从子程序中发出值，并在父程序中返回值，但当我试图访问它时，打印给我的只是空白数组？我过去没有处理过承诺，所以我不太了解......。

vue.js vuejs2 vue-component vuex vue-resource

回答 1 投票 0

如何从数组缓冲区获取错误信息

我有一个下载文件的请求（使用vue-resource）：this.$http.get(fileUrl, { responseType: 'arraybuffer' }). then( (response) => { let blob = new Blob([....

vue.js arraybuffer vue-resource extract-error-message

回答 1 投票 0

TypeError：无法读取未定义的属性'title'”

试图学习一些Vue.js。基本上，我只是想显示房间的标题。如您所见，我可以在控制台中看到整个数组，但无法从中打印标题...有什么想法吗？ ...