변수를 기반으로 Vue 필터 선택

변수를 기반으로 Vue 필터 선택

가지고 있는 것

Vue2에서 2D 어레이를 기반으로 테이블을 생성하고 있습니다.올바른 위치에 모든 값을 표시하면 표를 올바르게 표시할 수 있지만 포맷에 문제가 있습니다.템플릿은 다음과 같습니다.

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in data">
      <td>{{row[0]}}</td>
      <td>{{row[3]+row[1]+row[4]}}</td>
      <td>{{row[3]+row[2]+row[4]}}</td>
    </tr>
  </tbody>
</table>

데이터는 다음과 같습니다.

var data = [
  ['revenue', 123.4, 153.48, '$'],
  ['cost', 93.26, 109.48, '$'],
  ['profit', 30.14, 44, '$'],
  ['margin', 24.425, 28.668, '', '%']
];

실패한 것

이 방법은...ish. 원하는 행을 사용할 수 있고 단위(프리픽스 또는 접미사)를 지정할 수 있지만 완벽하지는 않습니다.가장 큰 문제는 통화의 소수 자릿수가 다르다는 것이다.이러한 값은 문자열로 저장할 수 있지만, 일부 값은 계산에 재사용되므로 해석해야 합니다.

내가 시도한 것

바로 이 시점에서 필터를 발견하게 되었습니다.내가 물려받은 이 프로젝트는 이미 많은 것을 내장하고 있기 때문에, 그들은 내가 원하는 대로 할 것 같다.그냥 바꿀 수 있어요.{{row[1] | currency}}아주 멋있게 뱉어내요.다만, 데이터 타입이 혼재하고 있는 것이 문제입니다.이 예에서는revenue,cost,그리고.profit모두 통화값이지만margin백분율입니다.

각 어레이의 4번째 인덱스에 필터를 지정하는 것이 이상적입니다.

var data = [
  ['revenue', 123.4, 153.48, 'currency'],
  ['cost', 93.26, 109.48, 'currency'],
  ['profit', 30.14, 44, 'currency'],
  ['margin', 24.425, 28.668, 'percent']
];

그런 다음 다음과 같은 값을 뱉어냅니다.

<td>{{row[1] | row[3]}}</td>
<td>{{row[2] | row[3]}}</td>

하지만 이것은 효과가 없는 것 같습니다.나도 노력했어filters[row[3]]다른 변형도 많지만 구문은 존재하지 않는 것 같습니다.물론 포맷을 위한 나만의 기능을 쓰고, 그리고 나서 다음과 같은 것을 사용할 수 있습니다.this.formatters[row[3]](row[1])하지만 이미 존재하는 것을 재평가하는 것은 말이 되지 않습니다.너무 지저분하게 만들지 않고 필터의 기본 기능에 액세스할 수 있는 방법이 있다면 그렇게 할 수 있지만 이상적이지는 않습니다.

원하는 것

이상적인 해결책은 기존 필터를 사용하여 테이블 내의 모든 출력을 포맷하는 것입니다.값의 함수를 직접 호출하는 것도 괜찮습니다.그렇지 않으면 기존 함수를 사용하여 값을 미리 포맷하여 별도의 객체에 문자열로 저장할 수 있지만 이상적이지 않습니다.

이를 통해 데이터 형식을 유지하고 기존 필터를 사용할 수 있습니다.

new Vue({
  el:"#app",
  data:{
    data: [
      ['revenue', 123.4, 153.48, "currency"],
      ['cost', 93.26, 109.48, "currency"],
      ['profit', 30.14, 44, "currency"],
      ['margin', 24.425, 28.668,  "percent"]
    ]
  },
  methods:{
    format(value, filter){
      return Vue.filter(filter)(value)
    }
  }
})

템플릿

  <tr v-for="row in data">
    <td>{{row[0]}}</td>
    <td>{{format(row[1], row[3])}}</td>
    <td>{{format(row[1], row[3])}}</td>
  </tr>

예.

Vue 필터에 대한 설명서는 부족하지만 필터에 원하는 대로 동적으로 액세스할 수 없는 것 같습니다.

가장 좋은 옵션은 사용자가 제안하는 오브젝트에 포맷 기능을 유지하는 것입니다.

catchall 필터를 컴포넌트에 추가하여 유형을 파라미터로 전달함으로써 조금 더 깔끔하게 만들 수 있습니다.

filters: {
  format(value, type) {
    return this.formatters[type](value);
  }
}

그런 다음 템플릿에서 다음을 수행합니다.

<td>{{row[2] | format(row[3]) }}</td>

사용하다

{{row[2] | rowFilter(row[3])}} 

자체 필터 생성

언급URL : https://stackoverflow.com/questions/43617930/select-vue-filter-based-on-variable