Стиль выделенного текста - Vue.js

Я пытаюсь создать приложение, но у меня небольшая проблема. Я новичок в Vue.js и не нашел решения. Я хочу применить стиль для отмеченного текста и другой стиль для непроверенного текста. Я попытался добавить индекс перед: style, но это не сработало. Это мой список с петлей. Каждый раз, когда пользователь нажимает кнопку, в список добавляется новая задача.

<ul class="list-group task-list">
  <app-image-slider></app-image-slider>
  <li class="list-group-item task-li" v-for="(task, index) in taskList" :key="index.taskList"> 
  <input type="checkbox" class="checkmark" v-model="toggle" true-value="yes" false-value="no"> 
    <span class="task-line" 
    :style="[toggle === 'no' ? {'text-decoration':'none'} : {'text-decoration':'line-through', 'color':'#718093'}]">
      {{task}} 
     </span>
     <button @click="removeTask(index)" class="remove-button">❌</button>
   </li>
</ul>

Как видите, у меня есть строчка с: style. Это работает, но стиль применяется ко всем задачам. Мне нужен какой-то стиль для отмеченного текста, а другой - для непроверенного текста.

И тег скрипта.

export default {
    data() {
        return {
            newTask: "",
            taskList: [ ],
            addTaskText: "Add some task to do!",
            textLength: 0,
            toggle: "no"
        }
    },
    methods: {
        countLetters() {
            this.textLength = this.newTask.length;
        },
        addNewTask() {
            let spaceRemove = this.newTask.replace(/\s/g, "");
            let newTaskWithoutSpace = spaceRemove;

            if (newTaskWithoutSpace.length >= 7) {
                this.taskList.push(this.newTask);
                this.newTask = "";
                this.textLength = 0;
            }
        },
        removeTask(index) {
            this.taskList.splice(index, 1);
        },
    },
    components: {
        appImageSlider: ImageSlider
    }
}

javascript vue.js vuejs3 vuejs2
person Community    schedule 23.09.2020    source источник
comment
пожалуйста, поделитесь своим сценарием   -  person Boussadjra Brahim    schedule 23.09.2020
comment
@BoussadjraBrahim * обновлено   -  person    schedule 23.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

У вас должен быть toggle для каждой задачи. То, как вы сейчас используете переключатель, будет применяться ко всем задачам.

Поэтому вместо массива строк для taskList сделайте его массивом объектов, где каждая задача выглядит примерно так:

{
  toggle: "no",
  description: "Clean room."
}

Таким образом, у вас получится цикл for, соответствующий:

<li class="list-group-item task-li" v-for="(task, index) in taskList" :key="index"> 
    <input type="checkbox" class="checkmark" v-model="task.toggle" true-value="yes" false-value="no"> 
    <span class="task-line" 
    :style="[task.toggle === 'no' ? {'text-decoration':'none'} : {'text-decoration':'line-through', 'color':'#718093'}]">
      {{task.description}} 
     </span>
     <button @click="removeTask(index)" class="remove-button">❌</button>
</li>
person Beyers    schedule 23.09.2020
comment
Теперь я получаю следующее: this.taskList.task.push не является fuciton taskList: {task:, toggle: no}, - person ; 23.09.2020
comment
@ Ionuț taskList - это массив, поэтому вы должны нажать на него, например this.taskList.push({ toggle: "no", description: "Clean room."}. Вам необходимо обновить свой addNewTask() код, чтобы он работал с объектом, а не только со строкой. - person Beyers; 23.09.2020