通过单击复选框（Vue.js）切换 div

Question

我有一个身份验证页面，我有一个复选框。我的主要想法是切换表单，我的复选框显示“已经有一个帐户”，如果单击它我想显示注册表单，如果它未选中我想显示登录表单。

我已经关注了this 示例，这就是我在标签中得到的内容：

<div id='#selector'>
<div class="container">
  <label class="bs-switch">
    Already have an account
    <input type="checkbox" v-model="checked">
    <span class="slider round"></span>
  </label>
  <div class="row" v-if="checked">
  </div>
</div>
</div>

我没有复制整个表单，它只是一个默认的引导登录页面。

在我的标签内：

import Vue from 'vue'

var app = new Vue({
  el: '#selector',
  data: {
    checked: false
  }
});

它确实显示了复选框，但没有显示我的登录卡。错误：

“checked”属性或方法未在实例上定义，但在渲染期间被引用。

和

"在 '!!babel-loader!../../../node_modules/vue-loader/lib/ 中找不到导出 'default' (导入为 'vue_script') selector?type=script&index=0!./Auth.vue'

我错过了什么？

Answer 1

嗯，我已经设法自己解决了。我不必导入 Vue 或创建新的 vue 元素。我只是使用了数据函数：

export default {


data: function() {
    return {
      checked: false
    }
  }
}