:value 和 @input 不适用于 vuejs 项目

Question

我正面临一个奇怪的问题。不知道是什么问题。我有一个vue组件名称Login.vue。这里是代码`

<form action="#" method="POST">
                <label>
                  <i class="icon-cx_user"></i>
                  <input
                    type="text"
                    name="email"
                    placeholder="Email"
                    required="required"
                    :value="loginEmail"
                    @input="SET_LOGIN_EMAIL"
                  >
                </label>
                <label class="cx-login-border">
                  <i class="icon-cx_password"></i>
                  <input
                    type="text"
                    name="password"
                    placeholder="Password"
                    :value="loginPassword"
                    @input="SET_LOGIN_PASSWORD"
                  >
                </label>
                <div class="cx-submit">
                  <a href="#">forgot your password?</a>
                  <button
                    class="nc-button-animate nc-button-medium nc-button-animate-left"
                    :disabled="validToLogin"
                    @click="login"
                  >
                    <span>Login</span>
                  </button>
                </div>
              </form>

当我在电子邮件或密码字段中输入内容时，它会显示对象值。这是我的突变

mutations: {
SET_LOGIN_EMAIL(state, email1) {
  state.loginEmail = email1
},
SET_LOGIN_PASSWORD(state, password) {
  state.loginPassword = password
}

}, 这是输入前后的控制台

但是我在使用vuetifyjs之前做过，这个功能没有问题。 我的 ma​​in.js 文件是

import { sync } from 'vuex-router-sync'
import Vue from 'vue'
import moment from 'moment'
import App from './App'
import router from './router'
import store from './store'
// Loader
import Loader from './components/loader/Loader'
import Tabs from './components/tabs/tabs'
import Tab from './components/tabs/tab'
import Tbs from './components/tbs/tbs'
import Tb from './components/tbs/tb'
import Info from './components/notification/Info'
Vue.component('loader', Loader)
Vue.component('tabs', Tabs)
Vue.component('tab', Tab)
Vue.component('tbs', Tbs)
Vue.component('tb', Tb)
Vue.component('info', Info)
/* eslint-disable no-new */
Vue.config.productionTip = false
Vue.prototype.moment = moment
sync(store, router)
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

任何帮助，我将不胜感激。在此先感谢。顺便说一句，我正在使用 webpack。

Answer 1

我为您创建了一个工作示例here.Few cmets：

1) 我看不出您为什么要在输入时更新商店？单击按钮时，您只能访问一次

2) @input 事件通过输入事件发送。实际值嵌套在data 下的输入事件中，因此值将在$event.data 下。

3) 如果您在输入时更新存储，它将覆盖以前的输入值

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <followers></followers>
</div>

<div id="followers">
  <div>Login Email: {{_loginEmail }}</div>
  <div>Login Password: {{ _loginPassword }}</div>

  <input type="text" name="email" placeholder="Email" required="required" v-model="loginEmail" @input="onEmailInput">

  <input type="text" name="password" placeholder="Password" v-model="loginPassword" @input="onPassWordInput">

  <button @click="onSave">Save To State</button>
</div>

Vue.component('followers', {
  el: "#followers",
  data() {
    return {
      followers: 0,
      loginEmail: "",
      loginPassword: "",
    }
  },
  created() {
    this.loginEmail = this.$store.state.loginEmail;
  },
  methods: {
   /*  onEmailInput(event) {
      this.$store.dispatch("setEmail", event.data)
    },
    onPassWordInput(event) {
      this.$store.dispatch("setPassword", event.data)
    }, */
    onSave() {
      this.$store.dispatch("setLogin", {
        email: this.loginEmail,
        password: this.loginPassword
      })
    }

  },
  computed: {
    _loginEmail() {
      return this.$store.state.loginEmail
    },
    _loginPassword() {
      return this.$store.state.loginPassword
    }
  }
});

const store = new Vuex.Store({
  state: {
    loginEmail: "",
    loginPassword: ""
  },
  actions: {
    setEmail({
      commit
    }, email) {
      commit("SET_LOGIN_EMAIL", email);
    },
    setPassword({
      commit
    }, password) {
      commit("SET_LOGIN_PASSWORD", password);
    },
    setLogin({
      commit
    }, loginObj) {
      commit("SET_LOGIN_EMAIL", loginObj.email);
      commit("SET_LOGIN_PASSWORD", loginObj.password);

    }
  },
  mutations: {
    SET_LOGIN_EMAIL(state, email1) {
      state.loginEmail = email1
    },
    SET_LOGIN_PASSWORD(state, password) {
      state.loginPassword = password
    }
  }
})

const app = new Vue({
  store,
  el: '#app'
})