편집 : 라이브 코드 편집기 추가 : https://ide.c9.io/dosstx/wordpress
VueJS2 및 Wordpress REST API를 사용하여 Wordpress JSON 데이터 개체를 필터링하려고합니다 (실제 예제에는 사용자 지정 게시물 유형이 있습니다).
배선에 문제가 있으며 검색 상자에 입력 된 검색어를 기반으로 필터링 할 테이블을 가져옵니다.
검색 기능이 없으면 모든 것이 잘 작동하지만 검색어를 사용하여 필터링을 시도하면 아무 일도 일어나지 않습니다. 콘솔에 오류가 없습니다.
내 Vue 인스턴스가 다음과 같습니다.
var vm = new Vue({
el: '#app',
data: {
searchTerm: '',
posts: []
},
computed: {
filteredItems: function(){
return this.posts.filter(function(post) {
return this.post.searchTerm; //i believe this line is the culprit
});
}
},
created: function(){
$.get('mylocalhost/wp-json/wp/v2/products/' + '?_embed=true')
.done(function(data) {
vm.posts = data;
});
}
});
내 HTML :
<div id="app">
<form>
<input type="text" v-model="searchTerm">
</form>
그리고 내 HTML 아래로 .... :
<tr v-for="post in filteredItems">
<td>{{post.title.rendered}}</td>
...snip ...
</div>
수정 방법에 대한 단서가 있으면 대단히 감사하겠습니다.
filter방법을 올바르게 사용하고 있지 않습니다 .
로부터 에 대한 MDN 문서 filter방법 :
filter()배열의 각 요소에 대해 제공된 콜백 함수를 한 번씩 호출하고 콜백이로 강제 변환되는 값을 반환하는 모든 값의 새 배열을 생성합니다true.
전달 된 콜백 은 필터링 된 배열에 배열 요소를 포함할지 여부를 결정 filter하는 Boolean값을 반환해야합니다 .
귀하의 경우에는 post개체 content에 검색하려는 속성 (예 :)이 있고 검색어를 포함하는 콘텐츠가있는 게시물 만 포함하고 싶다고 가정합니다. 따라서 다음과 같이 할 수 있습니다.
computed: {
filteredItems: function() {
return this.posts.filter(function(post) {
return post.content.indexOf(this.searchTerm) != -1;
});
}
},
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다