Vuejs Ready 기능이 트리거되지 않았습니다.
저는 기본적으로 두 가지 방법이 있는 이 vue 함수를 가지고 있습니다.첫번째 것postStatus
사용자가 저장 버튼을 클릭한 직후 게시물을 저장하는 데 사용되며, 다른 게시물은getPosts
데이터베이스에서 해당 사용자의 모든 이전 게시물을 검색하는 데 사용됩니다.
여기 vue.js가 있습니다. 여기서 컨트롤러에 대한 Ajax 호출이 있습니다(Laravel 5.3).
$(document).ready(function () {
var csrf_token = $('meta[name="csrf-token"]').attr('content');
/*Event handling within vue*/
//when we actually submit the form, we want to catch the action
new Vue({
el : '#timeline',
data : {
post : '',
posts : [],
token : csrf_token,
limit : 20,
},
methods : {
postStatus : function (e) {
e.preventDefault();
//console.log('Posted: '+this.post+ '. Token: '+this.token);
var request = $.ajax({
url : '/posts',
method : "POST",
dataType : 'json',
data : {
'body' : this.post,
'_token': this.token,
}
}).done(function (data) {
//console.log('Data saved successfully. Response: '+data);
this.post = '';
this.posts.unshift(data); //Push it to the top of the array and pass the data that we get back
}.bind(this));/*http://stackoverflow.com/a/26479602/1883256 and http://stackoverflow.com/a/39945594/1883256 */
/*request.done(function( msg ) {
console.log('The tweet has been saved: '+msg+'. Outside ...');
//$( "#log" ).html( msg );
});*/
request.fail(function( jqXHR, textStatus ) {
console.log( "Request failed: " + textStatus );
});
},
getPosts : function () {
//Ajax request to retrieve all posts
$.ajax({
url : '/posts',
method : "GET",
dataType : 'json',
data : {
limit : this.limit,
}
}).done(function (data) {
this.posts = data.posts;
}.bind(this));
}
},
//the following will be run when everything is booted up
ready : function () {
console.log('Attempting to get the previous posts ...');
this.getPosts();
}
});
});
지금까지, 첫 번째 방법은postStatus
잘 작동하고 있습니다.
두 번째 것은 준비된 기능에서 바로 호출되거나 발사되어야 하지만, 아무 일도 일어나지 않습니다.console.log 메시지도 표시되지 않습니다.Attempting to get the previous posts ...
발사된 적이 없는 것 같습니다.
무엇이 문제입니까?어떻게 고치죠?
참고: 저는 jQuery 3.1.1, Vue.js 2.0.1을 사용하고 있습니다.
Vue 2.0.1을 사용하고 있습니다.거기에는 없다ready
방법은 Vue 2.0 이상입니다.
다음은 모든 Vue 2.0 변경 사항 목록에 대한 링크입니다.https://github.com/vuejs/vue/issues/2873
위의 페이지에서 언급한 것처럼, 당신은 다음을 사용할 수 있습니다.mounted
대신에ready
.
문제가 아니라 참고 사항일 뿐입니다.당신은 jQuery와 Vue를 광범위하게 혼합하고 있습니다.http 관련 기능에만 jQuery가 필요한 경우, 대신 사용할 수 있습니다.vue-resource
- https://github.com/vuejs/vue-resource
편집: 업데이트 날짜vue-resource
@EmileBergeron이 댓글에서 지적한 바와 같이, vue-resource는 2016년 11월에 훨씬 전에 은퇴했습니다(제가 마지막 단락과 함께 이 답변을 제공한 지 몇 주 후).vue-resource
) 동일한 내용에 대한 자세한 내용은 다음과 같습니다.
https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4
@마니의 사용 제안mounted(){}
숨겨진 구성 요소에서 작동합니다.다음과 같은 조건을 사용하여 숨겨진 요소와 표시될 때 구성 요소에서 기능을 실행하려는 경우v-if=""
또는v-show=""
그 다음에 사용updated(){}
.
언급URL : https://stackoverflow.com/questions/40209443/vue-js-ready-function-is-not-triggered
'programing' 카테고리의 다른 글
절차를 실행하는 방법? (0) | 2023.08.26 |
---|---|
잠금 모드 유형을 활성화하는 방법.Spring Data JPA를 사용하여 엔티티를 조회할 때의 SEPMISTIC_WRITE? (0) | 2023.08.26 |
CoffeeScript - JQuery가 켜진 상태에서 동적으로 로드된 개체에 대한 클릭 이벤트 바인딩 (0) | 2023.08.26 |
CSS에서 '@' 기호의 목적은 무엇입니까? (0) | 2023.08.26 |
express는 'body-parser deprecommended extended'로 오류를 발생시킵니다. (0) | 2023.08.26 |