Question

我的登录/注册包含在VueJS组件中，我使用FoundationCSS/JS作为选项卡面板，VueJS从输入中获取值。当我尝试单击其他选项卡时发生错误（即，当我单击注册选项卡时，它不会显示注册面板）。当我没有使登录/注册div成为VueJS组件时，标签面板切换工作正常，但我无法从输入中获取值。关于为什么会发生这种情况以及如何解决问题的任何想法？

这是我的表单（一个登录面板和另一个注册面板）：

<div id="authenticator-form">
    <ul class="tabs" data-tabs id="example-tabs">
        <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Login</a></li>
        <li class="tabs-title"><a href="#panel2">Sign Up</a></li>
    </ul>
    <div class="tabs-content" data-tabs-content="example-tabs">
        <div class="tabs-panel is-active" id="panel1">
          <input v-model="loginEmail" type="text" placeholder="email">
          <input v-model="loginPassword" type="password" placeholder="password">
          <button v-on:click="login" class="button primary" id="login">Login</button>

      </div>
      <div class="tabs-panel" id="panel2">
            <input v-model="name" type="text" placeholder="Name">
            <input v-model="signUpEmail" type="text" placeholder="Email">
            <input v-model="signUpPassword" type="password" placeholder="Password">
            <button v-on:click="signup" class="button primary" id="signup">Signup</button>
      </div>
    </div>
</div>

这是VueJS组件：

let authenticator = new Vue({
  el: '#authenticator-form',
  data: {
    loginEmail: '',
    loginPassword: '',
    signUpEmail: '',
    signUpPassword: '',
    name: '',
  },
  methods: {
    login: function () {
        console.log("LOGGING IN WITH " + this.email)
    },
    signup: function() {
        console.log("SIGNING UP WITH " + this.email)
    }
  }
})

Foundation Framework不与VueJS一起使用选项卡面板/内容切换

0 个答案: