No entiendo por qué mi nuevo código no funciona. Pude extraer un caso mínimo reproducible . Cuando created() establece un dato sincrónicamente, funciona bien y se muestra una radio de artículo. Cuando lo rodeo con el tiempo de espera, el blog permanece seleccionado. Vue 2.6.12
El error en este código se solucionó, pero esta no fue la causa de mis problemas porque mi código real es diferente. Mi problema es que el botón de opción no está marcado cuando debería estarlo después de cambiar los datos reactivos.
<Radio v-model="type" identifier="article" class="pl-3" label="article" name="type" /> <Radio v-model="type" identifier="blog" class="pl-3" label="blog" name="type" /> <div>Selected {{ type }}</div> data() { return { type: "blog", }; }, created() { setTimeout(function () { this.type = "article"; console.log(this.type); }, 800); },Esto hace que mi cabeza explote porque un código similar en un componente diferente funciona bien.
ACTUALIZAR:
mi código original, que no funciona, es
computed: { blog() { return this.$store.getters.BLOG; }, }, watch: { blog() { this.type = (this.blog.info.editorial) ? 'article' : 'blog'; }, created() { this.$store.dispatch('FETCH_BLOG', { slug: this.slug }); },Código fuente relevante:
Todo lo que necesita es cambiar su función a una función de flecha porque no apunta sus datos de esta manera
setTimeout(() => { this.type = "article"; console.log(this.type); }, 800);Supongo que su código original no establece el type en la función de datos de vue, por lo que no reaccionará cuando asigne this.type a un nuevo valor.
Administrar el estado en un formulario es complicado, consulte esta biblioteca: https://github.com/vue-formily/formily y tal vez le ayude a trabajar más fácilmente con el formulario, le permitirá separar la definición del formulario del componente vue que hace es reutilizable, y administrará el estado por usted...
Aquí hay una pequeña demostración para su problema: https://codepen.io/hqnan/pen/YzQbxxo
El problema es que la propiedad selected en Radio.vue solo se establece igual al value en el gancho created() . Cuando se produce setTimeout() en el componente principal, se cambia la propiedad v-model Radio.vue , lo que actualiza su propiedad de value , pero su propiedad selected no se actualiza automáticamente para que coincida.
La solución es reemplazar el cambio de enlace created() con un observador en el value que actualiza selected :
// Radio.vue export default { created() { // ⛔️ Remove this //if (this.value) { // this.selected = this.value //} }, watch: { value: { handler(value) { this.selected = value }, immediate: true, }, }, }