Использование выпадающего меню в Vue для изменения цвета текста

Question

Я пытаюсь изменить цвет текста в зависимости от того, какой вариант выбран из выпадающего меню. Это для проекта TODO List, над которым я работаю. В раскрывающемся меню есть три параметра: Высокая срочность (изменить текст на красный), Средняя срочность (изменить текст на желтый) и Низкая срочность (изменить текст на зеленый).

<template>
  <div class="TodoList">
    <input type="text" class="todo-input" v-model="newTodo" @keyup.enter="addTodo">
    <div v-for="(todo, index) in todos" :key="todo.id" class="todo-item"     
        </div>
        <ul class="urgency-column">
            <li>
                <label class="todo-label" >Select Urgency level:</label>
            </li>
            <li>
                <select class="todo-drop" id="" onchange="setUrgency()">
                    <option value="high">High Urgency</option>
                    <option value="medium">Medium Urgency</option>
                    <option value="low">Low Urgency</option>
                </select>
            </li>
        </ul>
    </div>
  </div>
</template>

<scripts>
export default {
  methods: {
    setUrgency(todo) {}
  }
}
</script>

Answer 1

Сначала используйте v-model, чтобы зафиксировать выбранную срочность.Убедитесь, что модель включает свойство urgency при добавлении нового элемента TODO:

methods: {
  addItem() {
    this.todos.push({
      urgency: '',
      //...
    })
  }
}

<select class="todo-drop" v-model="todo.urgency">...</select>

Привязка класса

Вы можете использовать привязку класса дляустановить определенный класс на основе значения urgency элемента:

<div class="item-text"
     :class="{ high: todo.urgency === 'high', medium: todo.urgency === 'medium', low: todo.urgency === 'low' }">
  {{todo.text}}
</div>

Затем в вашем блоке <style> введите текст элемента в соответствии с соответствующим классом срочности:

.item-text.high {
  color: red;
}
.item-text.medium {
  color: yellow;
}
.item-text.low {
  color: green;
}

Привязка атрибута

Или вы можете применить атрибут, который может быть выбран в CSS.Например, это добавляет к текстовому контейнеру элемента TODO атрибут urgency со значением, равным выбранной срочности:

<div class="item-text" :urgency="todo.urgency">{{todo.text}}</div>

Затем в своем блоке <style> используйте селектор атрибута для стилизации текста элемента по срочности:

.item-text[urgency="high"] {
  color: red;
}
.item-text[urgency="medium"] {
  color: yellow;
}
.item-text[urgency="low"] {
  color: green;
}