Не могу правильно вызвать функцию vue из html (бесконечный цикл обновления в компонентной функции рендеринга) - PullRequest
Новая
       8

Не могу правильно вызвать функцию vue из html (бесконечный цикл обновления в компонентной функции рендеринга)

1 голос
/ 01 ноября 2019

У меня ошибка в консоли, когда я пытаюсь отсортировать массив в порядке возрастания или убывания.

Я использую Vue для создания упорядоченной таблицы, и я уже могу создать таблицу с даннымиимеют. Но когда я вызываю функцию, я получаю правильное отображение результатов на своей странице, но в консоли появляется ошибка. Когда я пытаюсь создать некоторый код, возвращающий% 10 всего массива, например var i = array.lenght * 0-1", он не работает. 

<tbody id="app" v-bind:placeholder="OrdenarMiembrosDesc(members)" required>
    <tr v-for="member in members">
    <td>{{ member.first_name }} {{member.last_name}}</td>
    <td>{{ member.total_votes }}</td>
    <td>{{ member.votes_with_party_pct }} </td>
    </tr>
</tbody>

<script>

let app = new Vue({
    el: '#app',
    data: {
        members: [] //this already have a lot of users info, and it works
    },
    methods: {
        OrdenarMiembrosAsc(miembros) {
            return miembros.sort((a, b) => (a.votes_with_party_pct > b.votes_with_party_pct) ? 1 : -1);
        },

        OrdenarMiembrosDesc: function(miembros) {
            var temp = miembros.sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);
            var i = temp.lenght;
            console.log(temp);
            console.log(i);
            return temp;
        },
    }
});

</script>

Я не ожидаю сообщений, кроме журнала моей переменной, но у менямного консольных журналов и затем "[Vue warn]: у вас может быть бесконечный цикл обновления в функции рендеринга компонента.

(найдено в)"

1 Ответ

0 голосов
/ 01 ноября 2019

Любые методы, которые вызываются во время рендеринга (т. Е. Вызовы методов в вашем шаблоне), не должны изменять реактивное состояние, потому что это вызовет потенциально бесконечное повторное рендеринг, и, следовательно, предупреждение.

members - реактивное состояниеи вы вызываете members.sort(), который изменяет массив вместо возврата нового массива.

Простое исправление - .slice() сначала. При этом выполняется мелкое клонирование массива. 

var temp = miembros
  .slice()
  .sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);

Еще лучше определить их как вычисляемые свойства вместо методов, поскольку у них нет причин быть методами, и вы получаете преимущество кэширования результата для улучшенияпроизводительность. 

computed: {
  OrdenarMiembrosAsc() {
    return this.members
      .slice()
      .sort((a, b) => (a.votes_with_party_pct > b.votes_with_party_pct) ? 1 : -1);
  },

  OrdenarMiembrosDesc() {
    return this.members
      .slice()
      .sort((a, b) => (a.votes_with_party_pct < b.votes_with_party_pct) ? 1 : -1);
  }
}
...