VueJs 2不會在“就緒”功能中調用Ajax請求(VueJs 2 doesn't invoke Ajax request in the “ready” function)
我目前正在使用Vue 2.2.4。 我在“就緒”塊中建立了一個Vue元素和ajax函數，就像上面的例子一樣，但沒有渲染任何内容。 沒有列印console.log，表明甚至沒有調用那些ajax請求。 誰知道發生了什麼事？ 假設我必須使用jQuery ajax lib來完成這項任務。
以下是我的代碼：
var newJobsVue = new Vue({
el: '#new-jobs',
data: {
jobs: []
},
methods: {
ready: function () {
var self = this;
return $.ajax({
method: 'GET',
url: 'https://api.indeed.com/ads/apisearch',
crossDomain: true,
dataType: 'jsonp',
data: {
'v': '2',
'format': 'json',
'publisher': ,
q: 'javascript',
l: '94112',
userip: 'localhost',
useragent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2)',
latlong: '1'
}
})
.done(function(response){
//render the jobs from the search_response
console.log("response is>>>>>", response.results);
//nope, this is not actually logged
self.jobs = response.results;
})
.fail(function(error){
console.log("error is>>>", error);
// neither is this one logged
});
}
}
});
I am currently using Vue 2.2.4. I created a Vue element, and the ajax function inside "ready" block, just like the above example, but nothing is rendered. No console.log is printed indicating that those ajax request is not even invoked. Anybody knows what's going on? assume that I have to use the jQuery ajax lib for this task.
Below is my code:
var newJobsVue = new Vue({
el: '#new-jobs',
data: {
jobs: []
},
methods: {
ready: function () {
var self = this;
return $.ajax({
method: 'GET',
url: 'https://api.indeed.com/ads/apisearch',
crossDomain: true,
dataType: 'jsonp',
data: {
'v': '2',
'format': 'json',
'publisher': ,
q: 'javascript',
l: '94112',
userip: 'localhost',
useragent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2)',
latlong: '1'
}
})
.done(function(response){
//render the jobs from the search_response
console.log("response is>>>>>", response.results);
//nope, this is not actually logged
self.jobs = response.results;
})
.fail(function(error){
console.log("error is>>>", error);
// neither is this one logged
});
}
}
});
原文：https://stackoverflow.com/questions/42917977
更新時間：2019-12-04 10:12
最滿意答案
你永遠不會ready 。 嘗試
var newJobsVue = new Vue({
el: '#new-jobs',
data: {
jobs: []
},
methods: {
ready: function () {
// alot of code...
}
},
mounted(){
this.ready();
}
});
You never call ready. Try
var newJobsVue = new Vue({
el: '#new-jobs',
data: {
jobs: []
},
methods: {
ready: function () {
// alot of code...
}
},
mounted(){
this.ready();
}
});
相關問答
是以你的問題是你正在請求一個具有不同端口的頁面。 相同的原始政策說協定， 端口和主機應該是相同的。 看到 http://en.wikipedia.org/wiki/Same_origin_policy和https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript So your problem is that you are requesting a page with a different port. The same o
...
你ready鈎子是在methods: {}内部methods: {}處理程式，但實際上應該在外面： methods: {
fetchData: function () {
// your AJAX here
}
},
ready: function () {
this.fetchData()
}
Your ready hook is inside methods: {} handler but in reality should be outside: methods: {
...
Chosen插件正在建立一個新的下拉清單，是以Vue無法正确觀察。 您必須在所選的change事件中手動更改Vue： var vm = new Vue({
el: '#app',
data: {
fruit:"Apple",
fruits: ['Apple', 'Banana', 'Orange']
},
ready: function() {
$('.chosen-select').chosen({ width: '20%' }).change(funct
...
我認為首選方法是建構一個元件(或使用現有的元件)，它将具有道具等。但是，事實證明，在指令中有一個内部屬性可以使用： _scope 。 它在終端指令示例中記錄(至少提到)。 你的綁定功能變成： bind: function() {
const scope = this._scope;
this.editor = $(this.el).summernote({
airMode: true,
disableDragAndDrop: true,
popover: {
...
[更新： sync在Vue 2中删除 ，是以您需要遵循标準的道具，事件設計模式] 您可以讓父視圖模型将prop傳遞給每個元件， 使用搜尋欄的sync 。 搜尋欄将填充ajax調用中的值，它将同步到父級并向下跟蹤到跟蹤結果。 一些示例代碼： Vue.component('child1', {
props: ['ajaxData'],
methods: {
loadData: function () {
this.ajaxData = 'Some data is l
...
其實這是我的錯。 我為圖示調用了錯誤的類名。 我正在更新，一切都會正常。 我希望這個vue遞歸樹模型對其他人有用。 Actually it was my fault. I called wrong class name for the icon. I am updating and everything will work fine. I hope this vue recursive tree model will be useful for others.
不，添加到onDOMready的函數将始終執行，并且如果事件已經發生，将立即執行。 請參閱http://api.jquery.com/ready/上的文檔：隻有當您使用$(document).bind("ready")時才會在事件已經觸發時執行。 非觸發事件處理程式的一個可能原因是其他處理程式抛出錯誤。 jQuery有一個用于待執行處理程式的内部數組，處理本機DOM加載事件的方法隻是疊代它。 如果其中一個較早的處理程式出現錯誤，則循環中斷并且之後添加的其他處理程式将不會被調用。 No, funct
...
首先，你隻在Vue執行個體中擷取姓氏的原因是因為你用刀片寫死。 當您使用foreach循環時，即使在循環完成後，最後一次疊代仍将在腳本中可用(在本例中是循環中的最後一個$course )。 this.course.name = '{{$course->name}}', //
如果您在控制台中檢查html，您将看到名稱被寫死(請記住，在将代碼發送到浏覽器之前，将在伺服器上評估您的PHP代碼)。 它在您單擊按鈕之前出現的原因是因為
...
你永遠不會ready 。 嘗試 var newJobsVue = new Vue({
el: '#new-jobs',
data: {
jobs: []
},
methods: {
ready: function () {
// alot of code...
}
},
mounted(){
this.ready();
}
});
You never call re
...