Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Popup can't open after hot reloading with some vue3 script changed on vite

Abierto
  • ¿Algo no está bien?
#4,341 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
55/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
javascript, vite
Área
frontend

Línea de trabajo

Comienza con la configuración de Framework7 en main.js y con el estado del popup y el código handleOpen en App.vue. Ejecuta npm run dev en el proyecto Vite Vue reproducido, activa la recarga en caliente del script descrita y verifica que el popup siga abriéndose después, sin actualizar el navegador.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

  • Framework7 version: 8.3.4
  • Vue.js version: 3.5.24
  • Platform and Target: win11 chrome browser
  • Live Link or CodeSandbox: none
Describe the bug

Popup can't open after hot reloading with some script changed on vite, refreshing the website will help.
PS: Changing some html may not make popup not function.

To Reproduce

Steps to reproduce the behavior:

  1. Create a new vite vue project: npm create vite@latest, choose vue and javascript
  2. Install framework7: npm i framework7 framework7-vue
  3. In main.js
import { createApp } from 'vue'
import './style.css'

import Framework7 from 'framework7/lite-bundle'
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle'
import 'framework7/css/bundle'
Framework7.use(Framework7Vue)

import App from './App.vue'

const app = createApp(App)
registerComponents(app)
app.mount('#app')
  1. In App.vue
<script setup>
import { reactive } from 'vue'
const f7params = {
  name: 'My App',
  theme: 'md',
  version: '1.0.0',
}

const edit = reactive({
  popupOpened: false,
})

const handleOpen = () => {
  edit.popupOpened = true
  console.log('handleOpen')
}
</script>

<template>
  <div id="app">
    <f7-app v-bind="f7params">
      <f7-page>
        <f7-block>
          <f7-button fill round style="width: 50%;" @click="handleOpen">open</f7-button>
        </f7-block>
        <f7-popup v-model:opened="edit.popupOpened" :closeByBackdropClick="false">
          <f7-page>
            <f7-navbar title="Edit">
              <f7-nav-right>
                <f7-link popup-close>Confirm</f7-link>
              </f7-nav-right>
            </f7-navbar>
          </f7-page>
        </f7-popup>
      </f7-page>
    </f7-app>
  </div>
</template>

<style>
body, html, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  outline: none;
}
</style>
  1. Run app: npm run dev
  2. Click the open button, the popup will show, then close it
  3. Change open to Open, save file, Click the Open button, the popup will show, then close it
  4. Change log in handleOpen, like
const handleOpen = () => {
  edit.popupOpened = true
  console.log('handleOpen1')
}

Click the Open button, nothing happened.

Expected behavior

After changing script and save, a hot-reload invoked, popup can still be opened.

Actual Behavior

After changing script and save, a hot-reload invoked, popup can't be opened, unless you refresh the browser.

Lenguaje dominante
JavaScript
Estrellas
18.8k
Forks
3.2k
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de framework7io/framework7

Todos los issues de framework7io/framework7

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.