Как применить класс к определенной ячейке в таблице Buefy?

Я хотел бы знать, есть ли способ, которым я могу динамически применять классы, нацеленные на конкретную ячейку в таблице Buefy. В качестве примера приведу следующий код, над которым я работаю:

Шаблон:

  <b-table :data="status.peerStatus">
    <template slot-scope="props">
      <b-table-column :class="classObject" v-for="(column, index) in columns" :key="index"
        :label="column.label" :visible="column.visible" :width="200">
        {{ props.row[column.field] }}
      </b-table-column>
    </template>
  </b-table>

Сценарий:

  computed: {
    classObject() {
      return {
        "has-background-info": true
      };
    }

Прямо сейчас вся строка подсвечивается синим цветом из-за того, что для has-background-info установлено значение true.

Однако я хотел бы нацелиться только на конкретную ячейку и условно применить класс, передав значение ячейки таким образом.

Прямо сейчас я пытаюсь передать значение ячейки classObject следующим образом

<b-table-column :class="classObject(props.row[column.field])" v-for="(column, index) in columns" :key="index"

И пытаясь установить класс соответственно

 computed: {
    classObject(cellValue) {
      return {
        "has-background-info": cellValue === "YES" ? true : false;
      };
    }

Однако вышеперечисленное не работает. Есть ли другой способ сделать это?


vue.js buefy
person Atreya Sridhar    schedule 29.10.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны поместить его в method вместо computed

methods: {
    classObject(cellValue) {
      return {
        "has-background-info": cellValue === "YES" ? true : false;
      };
    }
}
person ittus    schedule 29.10.2018
comment
Это сработало. Большое спасибо за разъяснения! Я знаю, что это вопрос для новичков, но почему он не сработал, когда я попытался использовать computed вместо methods - person Atreya Sridhar; 29.10.2018
comment
computed - это свойство компонента. Но в вашем компоненте это значение класса отличается для каждой ячейки, поэтому его следует вычислять динамически в методе. - person ittus; 29.10.2018
comment
Еще раз спасибо за разъяснения! - person Atreya Sridhar; 30.10.2018