vue.js for loop 내의 함수를 호출하여 현재 항목을 전달하려면 어떻게 해야 합니까?

vue.js for loop 내의 함수를 호출하여 현재 항목을 전달하려면 어떻게 해야 합니까?

vue.js 2를 사용하여 for 루프 내에서 현재 반복된 항목이 테스트에 합격했을 경우에만 행을 렌더링해야 합니다.

시험이 복잡해서 간단하다.v-if="item.value == x"안 될 것 같아요

나는 다음과 같은 함수를 작성했다.testIssue아이템을 받아들여 true 또는 false를 반환하고 그것을 사용하려고 합니다.v-if다음과 같습니다.

<template v-for="issue in search_results.issues">
  <tr v-if="testIssue(issue)">
     ....
  </tr>
</template>


var releaseApp = new Vue({
  el: '#release-app',
  methods: {
    testIssue: function(issue) {
      console.log(issue);
      console.log('test');
    },
  },
  mounted: function() {},
  data: {
    search_results: {
      issues: []
    },
  }
});

하지만,testIssue는 호출되지 않습니다.

회선을 바꾸면<tr v-if="testIssue">, 함수는 호출됩니다만, 그 후 저는 이 함수가 없습니다.issue테스트해야 할 변수입니다.

나도 노력했어<tr v-if="releaseApp.testIssue(issue)">

에서의 함수를 호출하려면 어떻게 해야 합니까?v-if포루프 내의 선언을 하고 현재 항목을 통과시킬 수 있습니까?

우선 넌 할 수 없어v-for에서<template>템플릿당 하나의 요소만 가질 수 있으므로 태그를 지정합니다.

v-for와 동일한 요소에 v-if를 추가할 수 있지만 v-if를 통과하지 못한 요소는 렌더링되지 않습니다.각 행의 선두 구성 요소인 경우 상위 구성 요소에서 v-for를 수행하고 소품으로 문제를 하위 구성 요소에 전달하는 것이 좋습니다.

부모:

<child-comp v-for="issue in search_results.issues" v-if="testIssue(issue)">
</child-comp>

아이:

<template>
  <tr>
    {{issue}}
  </tr>
</template>

시나리오는 이 바이올린의 유사한 예에서 작동합니다.

그러나 다음과 같은 방법으로 시도할 수도 있습니다.

다음과 같은 커스텀 디렉티브를 작성할 수 있습니다.v-hide통과하다issue가치로 삼을 수 있습니다.

그런 다음 명령어로 테스트 할 수 있습니다.testIssue()특정 요소의 표시를 none으로 설정합니다.

<template v-for="issue in search_results.issues">
  <tr v-hide="issue">
     ....
  </tr>
</template>


var releaseApp = new Vue({
  el: '#release-app',
  directive:{
    hide: {
        bind(el, binding, Vnode){
            var vm = Vnode.context;
            var issue = binding.value;
            if(vm.testIssue(issue)){
                el.style.display = 'none';
            }
        }
    }
  },
  methods: {
    testIssue: function(issue) {
      console.log(issue);
      console.log('test');
    },
  },
  mounted: function() {},
  data: {
    search_results: {
      issues: []
    },
  }
});

또한 다음 항목을 사용하여 계산 항목을 만들어 볼 수도 있습니다.filter실제로 렌더링하기 전에 모든 요소가 테스트 기능을 통과하는 배열이 되도록 합니다(이 경우 홀수만 반환).

https://codepen.io/aprouja1/pen/BZxejL

computed:{
    compIssues(){
      return this.search_results.issues.filter(el => el%2===1)
    }
  },

언급URL : https://stackoverflow.com/questions/44901416/vue-js-how-to-call-a-function-inside-a-for-loop-and-pass-the-current-item