javascript - 如何在 Vue 组件中绑定(bind)模型

Question

我有这个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>

这是在 laravel blade 模板中，@icon 是一个动态指令，它将引入 SVG，因此不能在组件上使用 template。

这就是我的 checkbox.js 的样子

Vue.component('checkbox', {

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

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

然而，当页面加载时，控制台会转储出几个错误

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

其中大约有 4 个出现，然后是一个

Failed to mount component: template or render function not defined

我假设最后一个是因为我使用的是内联 html 模板，而不是 JS？但是，我正在努力寻找如何实现我想要的目标!

此代码已从 AngularJS 应用程序迁移过来，该应用程序非常简单，代码就在此处

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

Answer 1

显然 secret 就在“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>