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

vue smart-select the text on the list is not updated after changing selected option by script

Abierto
#4,339 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
48/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
javascript
Área
frontend

Línea de trabajo

Comienza con la reproducción proporcionada de Vue 3.5.23 usando el componente smart-select, su vinculación v-model y el cambio de selectedId mediante el script. Verifica el comportamiento en la configuración de Chrome indicada y, a continuación, rastrea la ruta de actualización de smart-select. Se considera completado cuando la etiqueta de la lista cambia de Option 1 a Option 3 después de ejecutar el script y seleccionar una opción actualiza el valor vinculado de forma coherente.

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.23
  • Platform and Target: window11 chrome browser
Describe the bug

smart-select, the text on the list is not updated after changing selected option by script, while the popup selected option is updated correctly.

<script setup>
import { reactive } from 'vue'

let input = reactive({
  selectedId: 1,
  options: [
    {
      id: 1,
      text: 'Option 1',
    },
    {
      id: 2,
      text: 'Option 2',
    },
    {
      id: 3,
      text: 'Option 3',
    },
  ],
})

setTimeout(() => {
  input.selectedId = 3 // change selected option after 3 seconds
}, 3000)
</script>

<template>
  <f7-app>
    <f7-page>
      <f7-list class="select-list">
        <f7-list-item title="Options" smart-select :smart-select-params="{
          openIn: 'popup',
          closeOnSelect: true,
        }">
          <select v-model="input.selectedId">
            <option v-for="obj in input.options" :key="obj.id" :value="obj.id" :selected="input.selectedId === obj.id">{{ obj.text }}</option>
          </select>
        </f7-list-item>
      </f7-list>
    </f7-page>
  </f7-app>
</template>

<style lang="less">
body, html, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
</style>

At the beginning, shows Option 1, a script will change it to Option 3 after 3 seconds.
Image

3 seconds later, it is still Option 1
Image

while the popup is updated correctly
Image

clicking Option 3 in popup will not change the value outside, unless click Option 2.

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

Guía de contribución

Abrir la guía de contribución

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.