Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
#4,339 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Inizia con la riproduzione fornita di Vue 3.5.23 usando il componente smart-select, il relativo binding v-model e la modifica di selectedId tramite lo script. Verifica il comportamento nella configurazione Chrome indicata, quindi traccia il percorso di aggiornamento di smart-select. Il lavoro è completato quando l'etichetta dell'elenco cambia da Option 1 a Option 3 dopo l'esecuzione dello script e la selezione di un'opzione aggiorna in modo coerente il valore associato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

  • 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.

Lingua principale
JavaScript
Stelle
18.8k
Fork
3.2k
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di framework7io/framework7

Tutte le issue di framework7io/framework7

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.