CODEWITHSUNDEEP
javascriptmodelcomponentsvue.js
owenmelbz
owenmelbz

Reputation: 6544

How to bind a model inside a Vue compontent

I've got this 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>

This is inside a laravel blade template, and @icon is a dynamic directive that will pull in an SVG, so cant use template on the component.

This is what my checkbox.js looks like

Vue.component('checkbox', {

    data() {
        return {
             remember: false
        }
    },

    mounted() {
        console.log('mounted');
    }
});

However when the page loads the console dumps out several errors

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

about 4 of these appear, followed by a 

Failed to mount component: template or render function not defined

I assume the final one is because I'm using an inline html template, rather than JS? However I'm struggling to find out how to go about what I want!

This code has been migrated from an AngularJS app which was incredibly simple where the code was just

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

Upvotes: 2

Views: 234

Answers (1)

owenmelbz
owenmelbz

Reputation: 6544

Apparently the secret is in the "inline-template" attribute!

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

Upvotes: 1

Related Questions