Vue для l oop изменение формата данных - PullRequest
Новая
       2

Vue для l oop изменение формата данных

0 голосов
/ 28 февраля 2020

У меня есть некоторые данные для студентов и баланс их банковского счета. В vue я использую v-for до l oop через данные и помещаю их в таблицу.

У меня проблема в том, что я не могу понять, как изменить формат, когда l oop достигнет баланса банковского счета. Я хотел бы, чтобы он сформировался с "," в нужных местах и ​​поместил $ на передний план.

Я сделал фильтр, который делает все это, но я не могу понять, как его применить к в моих данных только имя "банка". 

gridData: [
      { id: 1, first_name: 'fname1', last_name: 'lname1', student_number:'1111', bank:100.01},
      { id: 2, first_name: 'fname2', last_name: 'lname2', student_number:'2222', bank:100.02},
      { id: 3, first_name: 'fname3', last_name: 'lname3', student_number:'3333', bank:100.03},
      { id: 4, first_name: 'fname4', last_name: 'lname4', student_number:'4444', bank:100.04},
    ]

Затем я добавляю все данные этими двумя строками. У меня есть некоторые другие функции, которые позволяют пользователю вводить что-либо в поле поиска, и оно будет фильтровать его на основе того, что находится в окне поиска. 

<tr v-for="entry in filteredData" :key="entry.id">
            <td v-for="key in columnID" :key="key.id"> {{entry[key]}}</td>

И фильтры, которые я добавил для изменения формата данные выглядят так: 

  filters: {
capitalize: function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
},
toUSD: function (value) {
  if (typeof value !== "number") {
      return value;
  }
  var formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0
  });
  return formatter.format(value);
}

},

Если я изменю их на: 

<tr v-for="entry in filteredData" :key="entry.id">
        <td v-for="key in columnID" :key="key.id"> {{entry[key] | toUSD}}</td>

Тогда, очевидно, они применяются ко всем ключам ввода. У меня вопрос, как я могу применить этот фильтр только к «банковскому» ключу ввода?

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 28 февраля 2020

Вы можете использовать v-if/else на клавише: 

<td v-for="key in columnID" :key="key.id"> 
    <span v-if="key === 'bank'">{{entry[key] | toUSD}} </span>
    <span v-else> {{ entry[key] }} </span>
</td>
...