반응형
Vue.js - v-for 내에서 필터 사용
어레이의 길이를 n개의 요소로 제한하는 단순한 Vue 필터가 있습니다.다음과 같이 올바르게 동작합니다.
{{ array | limitArray(2) }}
이제 실내에서 사용하고 싶습니다.v-for다음과 같이 루프를 설정합니다.
<li v-for="item in items | limitArray(3)">...</li>
하지만 그것은 오류를 낳는다.내부 필터는 어떻게 사용할 수 있습니까?v-for?
편집: 중요하지 않을 수 있지만 문제의 필터:
Vue.filter('limitArray', function (arr, length = 3) {
if (arr && arr.length) {
if (length == -1) {
return arr;
}
if (length > arr.length) {
return arr;
}
return arr.slice(0, length);
}
return null;
});
필터는 메서드로 호출해야 합니다.
<li v-for="item in $options.filters.limitArray(items, 3)">
사용할 수 있습니다.method대신filter:
<li v-for="item in limitArray(items,3)">...</li>
방법으로는 다음과 같습니다.
methods:{
limitArray (arr, length = 3) {
if (arr && arr.length) {
if (length == -1) {
return arr;
}
if (length > arr.length) {
return arr;
}
return arr.slice(0, length);
}
return null;
}
...
}
완전한 예
new Vue({
el: '#app',
data: {
days: [{
"number": 1,
"isSunday": false
},
{
"number": 2,
"isSunday": false
},
{
"number": 3,
"isSunday": false
},
{
"number": 4,
"isSunday": false
},
{
"number": 5,
"isSunday": false
},
{
"number": 6,
"isSunday": false
},
{
"number": 7,
"isSunday": true
},
{
"number": 8,
"isSunday": false
},
{
"number": 9,
"isSunday": false
},
{
"number": 10,
"isSunday": false
},
{
"number": 11,
"isSunday": false
},
{
"number": 12,
"isSunday": false
},
{
"number": 13,
"isSunday": false
},
{
"number": 14,
"isSunday": true
},
{
"number": 15,
"isSunday": false
},
{
"number": 16,
"isSunday": false
},
{
"number": 17,
"isSunday": false
},
{
"number": 18,
"isSunday": false
},
{
"number": 19,
"isSunday": false
},
{
"number": 20,
"isSunday": false
},
{
"number": 21,
"isSunday": true
},
{
"number": 22,
"isSunday": false
},
{
"number": 23,
"isSunday": false
},
{
"number": 24,
"isSunday": false
},
{
"number": 25,
"isSunday": false
},
{
"number": 26,
"isSunday": false
},
{
"number": 27,
"isSunday": false
},
{
"number": 28,
"isSunday": true
},
{
"number": 29,
"isSunday": false
},
{
"number": 30,
"isSunday": false
},
{
"number": 31,
"isSunday": false
}
]
},
methods: {
limitArray(arr, length = 3) {
if (arr && arr.length) {
if (length == -1) {
return arr;
}
if (length > arr.length) {
return arr;
}
return arr.slice(0, length);
}
return null;
}
}
})<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="app">
<table class="table table-striped">
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thi</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="day in limitArray(days,7)">
{{day.number}}
</td>
</tr>
</tbody>
</table>
</div>이렇게 하는 게 좋을 것 같아요.
<li v-for="item in $options.filter(v => dosomething)">
언급URL : https://stackoverflow.com/questions/53639575/vue-js-use-filter-inside-v-for
반응형
'programing' 카테고리의 다른 글
| 페이로드에 전달된 Vuex 어레이 변환 (0) | 2022.08.30 |
|---|---|
| VueJ에 컴포넌트를 재장착하는 방법 (0) | 2022.08.30 |
| Vue - Axios 응답에서 하위 구성 요소의 데이터를 전달합니다. (0) | 2022.08.30 |
| 오류: PostCSS 플러그인을 로드하지 못했습니다. 'postcss-import' 모듈을 찾을 수 없습니다(Vue 2). (0) | 2022.08.30 |
| Java GUI 프레임워크뭘 고를까?Swing, SWT, AWT, SwingX, JGodies, JavaFX, Apache Pivot? (0) | 2022.08.30 |