: значение и @input не работают для проекта vuejs

Question

Я столкнулся с какой-то усталой проблемой. Не знаю, в чем проблема.У меня есть имя компонента vue Login.vue.Here это код `

<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 и проблем с этим не былоособенность.Мой main.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/>'
})

Любая помощь, и я был бы благодарен. Заранее спасибо. Кстати, я использую веб-пакет.

Answer 1

Я создал рабочий пример для вас здесь . Несколько комментариев:

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'
})