Блог

Главная - Вопросы по программированию - Vue JS — Как выполнить условное отображение текста на основе события щелчка

Vue JS — Как выполнить условное отображение текста на основе события щелчка

#javascript #vue.js

#javascript #vue.js

Вопрос:

Я только начал изучать Vue, потому что хочу перейти с PHP на Javascript.

У меня есть вопрос, который я не могу решить, и я надеюсь, что вы сможете мне с ним помочь.

У меня есть список задач. Я хочу обновить статус, если я выполнил задачу. Если я нажму ссылку «Установить как завершенную», задача переместится из списка незавершенных задач в список завершенных задач.

введите описание изображения здесь

Вы можете видеть на скриншоте, что покупка молока находится в выполненных задачах. Что я пытаюсь сделать, так это добавить текст «завершено» или значок проверки рядом с надписью «Купить молоко» в список всех задач.

Вот мой код:

 < script >
  var app = new Vue({
    el: '#root',
    data: {
      message: 'Hello world!',
      tasks: [{
          description: 'Go to the store',
          completed: false
        },
        {
          description: 'Buy milk',
          completed: false
        },
        {
          description: 'Feed the dog',
          completed: false
        },
        {
          description: 'Cook something',
          completed: false
        }
      ]
    },
    methods: {
      setToCompleted() {
        this.completed = true;
      },

    },
    computed: {
      incompleteTasks() {
        return this.tasks.filter(task => !task.completed);
      },
      completedTasks() {
        return this.tasks.filter(task => task.completed);
      }

    }
  }); <
/script>  
 <div id="root">
  <h3>All tasks</h3>
  <ul>
    <li v-for="task in tasks" v-text="task.description == true ? 'Completed' : 'Not completed'"></li>
  </ul>

  <h3>Incomplete Tasks</h3>
  <ul>
    <li v-for="task in incompleteTasks">{{ task.description }}amp;nbsp|amp;nbsp<a href="#" @click="task.completed = true">Set as completed</a></li>
  </ul>

  <h3>Completed Tasks</h3>
  <ul>
    <li v-for="task in completedTasks" v-text="task.description"></li>
  </ul>
</div>

Что я пробовал, так это то, что я добавил условие в директиву v-text. Но оно всегда показывает, что не завершено. Можете ли вы объяснить мне, почему это не меняется? Я был бы признателен за вашу помощь.

Спасибо.

РЕДАКТИРОВАТЬ ======

Этот код решает мою проблему: спасибо @tomrlh

 <div id="root">
  <h3>All tasks</h3>
  <li v-for="task in tasks">
    {{ task.description }} {{ task.completed ? 'completed' : '' }}
  </li>
  <h3>Incomplete Tasks</h3>
  <ul>
    <li v-for="task in incompleteTasks">{{ task.description }}amp;nbsp|amp;nbsp<a href="#" @click="task.completed = true">Set as completed</a></li>
  </ul>

  <h3>Completed Tasks</h3>
  <ul>
    <li v-for="task in completedTasks" v-text="task.description"></li>
  </ul>
</div>

Ответ №1:

как насчет проверки выполнения задачи на вашей выставке «Все задачи«, а затем условного отображения сообщения «завершено»:

 <h3>All tasks</h3>
<li v-for="task in tasks">
    {{ task.description }} {{ task.completed ? ' | completed' }}
</li>