Обратить булево по щелчку с V-за?

голоса
2

Новичок в JS и VueCLI поэтому я попытаюсь объяснить, как лучше, как я могу. Я использую экспресс, как мой задний конец.

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

Экспресс: / маршруты:

        // fake data store
        const tasks = [
           { id: 1, task: 't1', completed: false},
           { id: 2, task: 't2', completed: false},
           { id: 3, task: 't3', completed: false}
        ];

        /**
        * GET handler for /tasks route
        * @returns {Array.<{id: Number, task: String, completed: Boolean}>} array of task objects 
        */
        router.get('/', (req, res) => {
           res.send(tasks);
        });

Webapp:

        /**
        * GET /tasks
        * @returns Promise => {Array.<{id: Number, task: String, completed: Boolean}>} array of task objects
        */
        export function getTasks() {
           return request('tasks');
        }

и теперь мой Вью компонент:

        <template>
        <div id=tasks>
            <h2>Movies to Add</h2>
            <ul class=todo-list>
            <li v-for='task in tasks' :id=task.id v-on:click=completeMovie($event) :key='task.id' class=todo-list__li>
                <input class=todo-list__input type=checkbox :name='task.task' :id=task.task>
                <div class=todo-list__checkbox>
                <span class=todo-list__checkbox-inner><i></i></span>
                </div>
                <label :for='task.task'>{{ task.task }}</label>
            </li>
            </ul>
        </div>
        </template>

        <script>
        import {getTasks} from './../../services/tasks';

        export default {
        name: 'TaskList',
        data: function() {
            return {
            tasks: []
            };
        },
        created: function() {
            getTasks()
            .then(res => this.tasks = res);
        },
        methods: {
            completeMovie: function (event) {
            var taskId = event.currentTarget.id -1;

            getTasks()
                .then((res) => {
                this.tasks = res;
                res[taskId].completed = !res[taskId].completed;
                });
            }
        }
        }
        </script>

Так что, когда я нажимаю на мой первый элемент списка он изменяет задачу: t1 Верно, но если нажать на второй элемент списка он изменяет t1 обратно в значение False и t2 в True. Я не знаю точно, что я делаю неправильно. Я даже не уверен, что это лучший способ сделать это. Мой главный вопрос, я не знаю, почему это происходит.

Любая помощь высоко ценится!

Задан 19/09/2018 в 13:24
источник пользователем
На других языках...                            


3 ответов

голоса
2

Вы, вероятно, чрезмерно усложнять это.

Все, что тебе нужно

<li v-for="task in tasks" :key="task.id" 
    @click="task.completed = !task.completed" 
    class="todo-list__li">

Демо ~ https://jsfiddle.net/xy1q0auL/2/

Там нет (очевидно) необходимости повторного получения задач каждый раз при нажатии на один. Вот почему ваши предыдущие изменения будут сброшены; это потому , что перепишет все данные с неизмененными значениями из getTasks().

Ответил 19/09/2018 в 13:30
источник пользователем

голоса
0

Вы можете сделать свой просто:

 <li v-for='task in tasks' :id="task.id" v-on:click="completeMovie(task.id)" :key='task.id' class="todo-list__li">
            <input class="todo-list__input" type="checkbox" :name='task.task' :id="task.task">
            <div class="todo-list__checkbox">
            <span class="todo-list__checkbox-inner"><i></i></span>
            </div>
            <label :for='task.task'>{{ task.task }}</label>
        </li>

Ans для метода

completeMovie: function ($taskId) {
        this.tasks[$taskId].completed = !this.tasks[$taskId].completed;

        }
    }
Ответил 19/09/2018 в 13:48
источник пользователем

голоса
0

Когда completeMovie () вызывается, вы посылаете запрос HTTP на сервер, который собирается отправить вам обратно неизмененный список задач. Я явно не понимаю, что вы пытаетесь достичь, но ваш обратный вызов в обещании не имеют Sens. В обратном вызове вы reaffect списка «Задачи» в вашем вю:

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

В этом случае, здесь график событий вы должны сделать:

  • Когда страница клиента загружаются, Vue Initialized компонент вю называет свой веб-сервис, чтобы получить список задач, а затем распечатать его.
  • Затем, когда я нажимаю на задачу, вы должны сделать еще один HTTP-вызов к вашему веб-сервиса (на другой маршрут), который будет обновлять список задач и вернуть его.
  • Тогда в вызове компоненты ви вы reaffect нового списка задач.
Ответил 19/09/2018 в 13:36
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more