[CSS][JavaScript][AJAX]Vue checboxes nie odpowiadaja Opcje

[dolar]

Witajcie. Zaczelam prace z frameworkiem Vue. Mam problem z checboxami, ktore chcialam zrobic troche customowo ( i tu zaczyna sie problem bo mi nie dzialaja z moimi cssami, a zwykly checbox dziala... ). Z tego co zauwazylam to tag label psuje mi wszystko i mam brak odopwidzi i reakcji ze strony checboxa, gdy chce nacisnac na neigo ( tka jakby byl disable ), a reaguje mi tylko pierwszy i nie wiem kompletnie dlaczego?
Tutaj moj kod z Vue:

[HTML] pobierz, plaintext 
 
Vue.component('todoList', {
    props: ['todoObj'],
    template: '<tr>' +
    '<td><div class="round"><input id="todoObj.id" type="checkbox" v-on:click="toggle" v-model="todoObj.done" /><label for="todoObj.id"></label></div></td>' +
    '<td class="textTodo">{{todoObj.description}}</td>' +
    '<td><button v-on:click="deleteTodo" class="btn-xs btn-danger">delete</button></td>' +
    '</tr>',
 
[HTML] pobierz, plaintext 

A tutaj moj template:

[HTML] pobierz, plaintext 
 
  <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Dashboard</div>
 
                    <div class="panel-body">
 
                        <div id="appTest">
                            <div>@{{error}}</div>
 
 
 
                            <table class="table-responsive">
                                <todo-list
                                        v-for="todo in todos"
                                        v-bind:todo-obj="todo"
                                        v-bind:key="todo.id"
                                        :todo-obj.sync="todo"
                                        v-on:usun="deleteTod"
                                        ></todo-list>
                            </table>
 
                            <div v-if="isLogged" id="todoText">
                                <textarea v-model="todoText" cols="53" rows="5"></textarea>
                                <div id="addButton">
                                    <button v-on:click="addTodo" class="btn btn-success" >Dodaj</button>
                                </div>
                            </div>
                            <div v-else>
                                Musisz sie
                                <a href="login">zalogowac</a>
                                zeby dodawac nowe zadania
                            </div>
 
                        </div>
                    </div>
                </div>
 
            </div>
        </div>
    </div>
 
[HTML] pobierz, plaintext 

Czy ktos jest w stanie mi podpowiedziec dlaczego z moimi customowymi checkboxami reaguej mi tylko pierwszy, a bez dziala wszystko bez zarzutu? Albo jak to naprawic?

A tu cssy:

[HTML] pobierz, plaintext 
.round {
    position: relative;
    width: 30px;
    margin-bottom: 7px;
}
 
.round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 28px;
}
 
.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px;
}
 
.round input[type="checkbox"] {
    visibility: hidden;
}
 
.round input[type="checkbox"]:checked + label {
    background-color: #66bb6a;
    border-color: #66bb6a;
}
 
.round input[type="checkbox"]:checked + label:after {
    opacity: 1;
}
 
 
[HTML] pobierz, plaintext 

Ten post edytował dolar 24.07.2017, 13:07:07