单击按钮时重绘屏幕

Question

我正在创建一个当我点击手表钱包按钮时模态化的进程。

我可以显示或隐藏模态框，但当我单击显示按钮时会呈现屏幕。

当我在console.log('Clicked')中检查控制台时，它显示了，但屏幕渲染并立即消失。

这是什么原因？

↓ Home.vue

<template>
  <div>
    <div class="login-message-area">
      <div>
        <span>{{ updateUserName }}Welcome！！</span>
      </div>

      <div>
        <span>残高 : 1000</span>
        <button @click="logOut">LogOut</button>
      </div>
    </div>

    <h1>ユーザ一覧</h1>

    <div class="user-list-wrapper">
      <h4>ユーザ名</h4>

      <ul class="user-list">
        <li>
          <span>TEST</span>
          <form>
            <button @click="openModal">watch wallet</button>
            <button>Send</button>
          </form>
        </li>
        <li>
          <span>TEST</span>
          <form>
            <button　@click="openModal">watch wallet</button>
            <button>Send</button>
          </form>
        </li>
        <li>
          <span>TEST</span>
          <form>
            <button　@click="openModal">watch wallet</button>
            <button>Send</button>
          </form>
        </li>
      </ul>
    </div>

    <div class="overlay" v-show="showContent" @click="closeModal">
      <div class="content">
        <p>Balance</p>
        <p>5,000Yen</p>
        <p><button @click="closeModal">Close</button></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        showContent: true
    };
  },
  computed: {
    updateUserName() {
      return this.$store.getters.updateUserName
    }
  },
  created() {
    this.$store.dispatch('updateUserName');
  },
  methods: {
    async logOut() {
        await this.$store.dispatch('logOut');
        this.$router.push('/');
    },
    openModal() {
      this.showContent = true
      console.log('Clicked');
    },
    closeModal() {
      this.showContent = false
    }
  }
};
</script>

↓store.js

import { createStore } from 'vuex';
import firebase from 'firebase';

const store = createStore({
  state() {
    return {
      userName: '',
      updateUserName: '',
      userLoginInfomation: '',
      errorMessage: ''

    };
  },
  getters: {
    getUserName: (state) => state.userName,
    updateUserName: (state) => state.updateUserName,
  },
  mutations: {
    setUserName(state, user) {
      state.userName = user.displayName;
    },
    updateUserName(state, updateUserName) {
      state.updateUserName = updateUserName;
    },
    userLoginInfomation(state, userLoginInfomation) {
        state.userLoginInfomation = userLoginInfomation
    },
    setErrorMessage(state, errorMessage) {
      state.errorMessage = errorMessage;
    },
  },
  actions: {
    async signUp({ commit }, userInfomation) {
      try {
        await firebase.auth().createUserWithEmailAndPassword(userInfomation.email,userInfomation.password);
        const user = firebase.auth().currentUser;
        await user.updateProfile({
          displayName: userInfomation.username,
        });
        commit('setUserName', user);
      } catch (e) {
        alert(e.message);
      }
    },
    updateUserName({ commit }) {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          commit('updateUserName', user.displayName);
        }
      });
    },
    async login({ commit }, userInfomation) {
        commit('userLoginInfomation', userInfomation);
        try {
            await firebase.auth().signInWithEmailAndPassword(userInfomation.email,userInfomation.password);
      } catch (e) {
            commit('setErrorMessage', e.message);
            alert(e.message);
      }
    },
    async logOut({ commit }) {
        try {
            await firebase.auth().signOut();
        } catch(e) {
            commit('setErrorMessage', e.message);
            alert(e.message);
        }
      }
  },
});

export default store;

Answer 1

将 type="button" 添加到您的按钮。

因为您在其中使用 <form> 和按钮而没有任何类型，默认情况下它的行为类似于 type ="submit"。

Answer 2

将 preventDefault 添加到您的@click 事件。像下面这样的东西。或者您可以添加 type="button" 以防止页面提交。

@click.prevent="showmodal"

所有@click 事件都将如此。

单击按钮时重绘屏幕

The screen is redrawn when the button is clicked

javascript

firebase

vue.js

vuex