如何模型绑定的Vue compontent

Question

我有这个网站

<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刀模板里面里面，​​是一个动态的指令，将在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

显然，这个秘密是在“内联模板”属性！

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