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