J'ai ce code html
<div class="input-group checkbox-group">
<checkbox class="checkbox text-red">
<input v-model="remember" type="checkbox" name="remember" id="remember">
<i v-if="!remember">@icon('checkbox-empty')</i>
<i v-if="remember">@icon('checkbox-ticked')</i>
</checkbox>
<label for="remember">Remember me</label>
</div>
Ceci est à l'intérieur d'un modèle de lame laravel, et @icon
est une directive dynamique qui permet d'extraire un SVG, on ne peut donc pas utiliser la directive template
sur le composant.
C'est ce que mon checkbox.js
ressemble à
Vue.component('checkbox', {
data() {
return {
remember: false
}
},
mounted() {
console.log('mounted');
}
});
Cependant, lorsque la page se charge, la console affiche plusieurs erreurs.
[Vue warn]: Property or method "remember" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)
environ 4 d'entre eux apparaissent, suivis d'un
Failed to mount component: template or render function not defined
Je suppose que le dernier est dû au fait que j'utilise un modèle html en ligne, plutôt que JS ? Cependant, j'ai du mal à trouver comment faire ce que je veux !
Ce code a été migré d'une application AngularJS qui était incroyablement simple et dont le code était juste
<span class="checkbox ng-cloak" data-ng-init="form.ticked = false">
<input id="{{ $field }}" data-ng-model="form.ticked" value="ticked" type="checkbox" name="tos" required>
<i data-ng-show="!form.ticked">@icon('checkbox-empty')</i>
<i data-ng-show="form.ticked">@icon('checkbox-ticked')</i>
</span>