2 votes

Comment lier un modèle à un composant Vue ?

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>

1voto

Owen Melbourne Points 1112

Apparemment, le secret se trouve dans l'attribut "inline-template" !

<checkbox inline-template class="input-group checkbox-group">
    <div class="v-template">
        <span 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>
        </span>
        <label for="remember">Remember me</label>
    </div>
</checkbox>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X