Ошибка: у вас может быть бесконечное обновление l oop в компонентной функции рендеринга - PullRequest
Новая
       85

Ошибка: у вас может быть бесконечное обновление l oop в компонентной функции рендеринга

0 голосов
/ 19 марта 2020

Я новичок в vuejs. Я пытаюсь отобразить флажок в таблице на основе некоторых условий. используя bootstrapvue lib для флажка. Ниже приведен мой код,

шаблон: 

<tr v-for="(item, index) in data" :key="index">
      <slot :row="item" >
        <td v-for="(column, index) in columns" :key="index" v-if="checkForCol(item, column)">
            <b-form-checkbox v-model="checked" name="check-button" disabled="disabled" switch></b-form-checkbox>
        </td>
        <td :key="index" v-else>
            <span v-if="hasValue(item, column)">
              {{itemValue(item, column)}}
            </span>
        </td>
      </slot>
    </tr>

Скрипт: 

data() {
    return {
      checked : false
    }
  },
methods: {
    hasValue(item, column) {
      return item[column] !== "undefined"
    },
    checkForCol(item, column) {
      if(column === "statusInfo") {
        this.checked = item[column] === "ONLINE" ? true : false
        return true    
      }
    },
    itemValue(item, column) {
      return item[column]
    }
  }

Данные столбца: 

[{
"label": "label 1",
"id": "5f123456",
"statusInfo": "OFFLINE",
},
{
"label": "label 2",
"id": "5f1236786",
"statusInfo": "ONLINE",
}]

для всех "ONLINE" значения не получают никаких ошибок. но если какая-либо строка имеет «OFFLINE», то получается бесконечная ошибка l oop. Я понял проблему, что это из-за проблемы мутации this.checked. Но нет решения, чтобы решить это. Любая помощь будет полезна. Заранее спасибо.

1 Ответ

0 голосов
/ 24 марта 2020

Я нашел альтернативный компонент vue-js-toggle-button, который принимает прямое значение вместо привязки его к переменной данных. Мое требование достигается с помощью vue-js-toggle-button.

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

Спасибо

...