Вычисляемое свойство или другой способ изменить стиль в зависимости от значения внутри v-for в Vue

У меня есть такой компонент:

Vue.component('mcp-item', {
    template: '#mcp-item-template',
    data() {
        return {
            name: "MCP v2",
            version: "2.0",
            imei: 'XXXXXX XX XXXXXX X',
            relays: [
                { name : "REL1", state : 0 },
                { name : "REL2", state : 0 }
            ],
            inputs: [
                { name: "BP1", state: 0, color: "#CC0000" },
                { name: "BP2", state: 0, color: "#CC0000"  },
                { name: "BP3", state: 1, color: "#00CC00"  },
                { name: "BP4", state: 0, color: "#CC0000"  },
                { name: "BP5", state: 0, color: "#CC0000"  },
                { name: "BP6", state: 0, color: "#CC0000"  }
            ],
        }
    },
    methods: {
        reboot: function (event) { alert( this.imei) }
    }
})

И где-то в шаблоне комментария:

<table>
    <thead>
        <tr>
            <th>Input</th>
            <th>State</th>
        </tr>
    </thead>
    <tbody v-for="input in inputs" :key="input.name">
        <tr>
            <td :style="{ 'color': input.color}">{{input.name}}</td>
            <td>{{input.state}}</td>
        </tr>
    </tbody>
</table>

Как видите, теперь у меня есть выделенное поле color в моем объекте (которое является элементом массива inputs в data):

JS:

{ name: "BP1", state: 0, color: "#CC0000" }

HTML:

<td :style="{ 'color': input.color}">{{input.name}}</td>

Я хочу избавиться от этого дополнительного свойства, но не могу понять, как использовать вычисляемое свойство внутри цикла v-for, чтобы сделать красный цвет для состояния ==0 и зеленый для состояния ==1.


vue.js computed-properties v-for
person Kamil    schedule 27.10.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вместо создания вычисляемого свойства или добавления логики в шаблон я бы создал метод getColor(state), который выглядит так:

getColor(state) {
  let color = '';
  if (state === 0) {
    color = 'red';
  } else if (state === 1) {
    color = 'green';
  }
  return { color };
}

Или, если единственными значениями являются 0 и 1, вы можете сократить это до чего-то вроде:

getColor(state) {
  const color = state === 0 ? 'red' : 'green';
  return { color };
}

затем назовите это так:

<td :style="getColor(input.state)">{{input.name}}</td>

person Hannah    schedule 27.10.2020
comment
Где опытный пользователь Vue поместит этот метод? В глобальной области или в компоненте? - person Kamil; 27.10.2020
comment
Если вы используете его только в этом компоненте, добавьте его туда. Если вы думаете, что будете использовать его в нескольких компонентах, вы можете создать внешний вспомогательный файл, который экспортирует этот метод и импортирует его по мере необходимости. - person Hannah; 28.10.2020

arrow_upward
1
arrow_downward

возможно, вычисляемое свойство является излишним - как насчет простого условия:

<td :style="{ 'red': input.state === 0, 'green': input.state === 1}">...// </td>
person tzknc    schedule 27.10.2020
comment
Спасибо за очень чистое и минимальное решение, но я выбрал другое, потому что могу установить больше свойств CSS. - person Kamil; 27.10.2020