Snu boolsk på klikk med v-for?

stemmer
2

Nybegynner til JS og VueCLI så jeg skal prøve å forklare så godt jeg kan. Jeg bruker Express som min back-end.

Jeg prøver å endre boolean i min rekke gjenstander på klikk. Jeg er i stand til å oppnå det, men når jeg klikker på en annen liste element i min v-for-løkken er det bla boolean i alle andre indekser i mitt utvalg. Her er min kode:

Express: / ruter:

        // 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');
        }

og nå min Vue komponent:

        <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>

Så når jeg klikker på min første listeelement det endrer Oppgave: t1 til True, men hvis jeg klikker på andre listepunkt den endres t1 tilbake til False og t2 til True. Jeg er ikke sikker på nøyaktig hva jeg gjør galt. Jeg er ikke engang sikker på at dette er den beste måten å gjøre dette. Mitt største problem er at jeg er ikke sikker på hvorfor det skjer.

Alle hjelpe er verdsatt!

Publisert på 19/09/2018 klokken 13:24
kilden bruker
På andre språk...                            


3 svar

stemmer
2

Du er sannsynligvis over-komplisere dette.

Alt du trenger er

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

Demo ~ https://jsfiddle.net/xy1q0auL/2/

Det er ingen (åpenbart) behov for å re-hente oppgavene hver gang du klikker på en. Dette er grunnen til dine tidligere endringene er nullstilt; det er fordi du overskriver alle data med umodifiserte verdier fra getTasks().

Svarte 19/09/2018 kl. 13:30
kilden bruker

stemmer
0

Du kan gjøre det enkelt:

 <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 for metoden

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

        }
    }
Svarte 19/09/2018 kl. 13:48
kilden bruker

stemmer
0

Når completeMovie () kalles, sender du en HTTP-forespørsel til serveren som skal sende deg tilbake uendret oppgaveliste. Jeg forstår ikke helt klart hva som er du prøver å oppnå, men din tilbakeringing i løftet har ingen sens. I tilbakeringing reaffect deg "oppgaver" -listen i vue:

skriv bildebeskrivelse her

I dette tilfellet her er tilfelle tidslinjen du trenger å gjøre:

  • Når klient siden er lastet, Vue initialisert, kaller vue komponent din webservice for å få oppgavelisten og deretter skrive den ut.
  • Så når jeg klikker på en oppgave, må du lage en annen HTTP kall til din webservice (på en annen rute), som vil oppdatere oppgaveliste og vil returnere det.
  • Deretter i samtalen din vue komponenten du reaffect den nye oppgavelisten.
Svarte 19/09/2018 kl. 13:36
kilden bruker

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