Vue.js: Разрешить флажок в td быть включенным в любом месте td

Question

Моя проблема довольно проста, должно быть простое решение. У меня есть таблица и флажок для каждой строки.

<tr v-repeat="claim: claims"> 
    <td v-on="click: claim.selected = !claim.selected"> 
     <input v-model="claim.selected" type="checkbox"> 
    </td> 
</tr> 

Проблема заключается в том, что работает при нажатии вокруг входа, в тд, но когда я нажимаю на входе непосредственно, он автоматически получает невыбранные из-за по щелчку окружающей тд. у кого-нибудь есть решение?

Answer 1

Переведите свой код в метод и позвоните по номеру .stopPropagation(). Что-то вроде этого:

<tr v-repeat="claim: claims"> 
    <td v-on="click: clicked"> 
     <input v-model="claim.selected" type="checkbox"> 
    </td> 
</tr> 

с кодом:

[...] 
methods: { 
    clicked: function (event) { 
     this.claim.selected = !this.claim.selected; 
     event.stopPropagation(); 
    } 
} 
[...]