Hello,
Sorry about my english, I’m french…
I try to set focus on my q-input but nothing happens… Could you help me please ?
<q-input outlined class="col" type="text" v-model="student" ref="studentName" placeholder="Nom de l'élève" style="margin-right : 20px">
<template v-slot:prepend>
<q-icon name="person" />
</template>
</q-input>
...
testFocus () {
console.log(this.$refs.studentName);
this.$refs.studentName.focus();
}
The console log if it can help ??? :
Index.vue?b484:499 VueComponent {_uid: 450, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}$attrs: (...)$children: [VueComponent]0: VueComponent {_uid: 451, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}length: 1__proto__: Array(0)$createElement: ƒ (a, b, c, d)$el: div.q-field.row.no-wrap.items-start.col.q-input.q-field--outlined$listeners: (...)$options: {parent: VueComponent, _parentVnode: VNode, propsData: {…}, _parentListeners: {…}, _renderChildren: undefined, …}$parent: VueComponent {_uid: 421, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}$refs: {input: input.q-field__native.q-placeholder, control: div.q-field__control.relative-position.row.no-wrap}$root: Vue {_uid: 11, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}$scopedSlots: {prepend: ƒ, $stable: true, $key: undefined, $hasNormal: false}$slots: {}$vnode: VNode {tag: "vue-component-41-QInput", data: {…}, children: undefined, text: undefined, elm: div.q-field.row.no-wrap.items-start.col.q-input.q-field--outlined, …}autofocus: (...)autogrow: (...)bgColor: (...)blur: ƒ ()borderless: (...)bottomSlots: (...)classes: (...)clearIcon: (...)clearable: (...)color: (...)computedCounter: (...)computedErrorMessage: (...)computedUnmask: undefinedcontentClass: (...)controlEvents: {focus: ƒ, focusin: ƒ, focusout: ƒ, popup-show: ƒ, popup-hide: ƒ}counter: (...)dark: (...)debounce: (...)dense: (...)disable: (...)editable: (...)error: (...)errorMessage: (...)fieldClass: (...)fillMask: (...)filled: (...)floatingLabel: (...)focus: ƒ ()focused: (...)focusoutTimer: 126hasError: (...)hasMask: falsehasValue: (...)hideBottomSpace: (...)hideHint: (...)hint: (...)innerError: (...)innerErrorMessage: (...)innerLoading: (...)innerValue: (...)inputClass: (...)inputStyle: (...)isDirty: (...)isTextarea: (...)itemAligned: (...)label: (...)lazyRules: (...)loading: (...)mask: (...)maskMarked: ""maskReplaced: ""maxValues: (...)maxlength: (...)noErrorIcon: (...)outlined: (...)prefix: (...)readonly: (...)resetValidation: ƒ ()reverseFillMask: (...)rounded: (...)rules: (...)select: ƒ ()shouldRenderBottom: (...)square: (...)stackLabel: (...)standout: (...)styleType: (...)suffix: (...)type: (...)unmaskedValue: (...)validate: ƒ ()validateIndex: 0value: (...)__adjustHeight: ƒ ()__adjustHeightDebounce: ƒ debounced()__clearValue: ƒ ()__emitValue: ƒ ()__fillWithMask: ƒ ()__focus: ƒ ()__getBottom: ƒ ()__getContent: ƒ ()__getControl: ƒ ()__getControlContainer: ƒ ()__getInitialMaskedValue: ƒ ()__getInnerAppendNode: ƒ ()__getPaddedMaskMarked: ƒ ()__mask: ƒ ()__maskReverse: ƒ ()__moveCursorLeft: ƒ ()__moveCursorLeftReverse: ƒ ()__moveCursorRight: ƒ ()__moveCursorRightReverse: ƒ ()__onChange: ƒ ()__onCompositionEnd: ƒ ()__onCompositionStart: ƒ ()__onCompositionUpdate: ƒ ()__onControlFocusin: ƒ ()__onControlFocusout: ƒ ()__onControlPopupHide: ƒ ()__onControlPopupShow: ƒ ()__onInput: ƒ ()__onMaskedKeydown: ƒ ()__triggerValidation: ƒ ()__unmask: ƒ ()__updateMaskInternals: ƒ ()__updateMaskValue: ƒ ()_c: ƒ (a, b, c, d)_computedWatchers: {hasError: Watcher, computedErrorMessage: Watcher, editable: Watcher, hasValue: Watcher, computedCounter: Watcher, …}_data: {…}_directInactive: false_events: {input: Array(1)}_hasHookEvent: false_inactive: null_isBeingDestroyed: false_isDestroyed: false_isMounted: true_isVue: true_props: {…}_renderProxy: Proxy {_uid: 450, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}_routerRoot: Vue {_uid: 11, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}_self: VueComponent {_uid: 450, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}_staticTrees: null_uid: 450_vnode: VNode {tag: "div", data: {…}, children: Array(1), text: undefined, elm: div.q-field.row.no-wrap.items-start.col.q-input.q-field--outlined, …}_watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}_watchers: (22) [Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher, Watcher]$data: (...)$isServer: (...)$props: (...)$route: (...)$router: (...)$ssrContext: (...)get $attrs: ƒ reactiveGetter()set $attrs: ƒ reactiveSetter(newVal)get $listeners: ƒ reactiveGetter()set $listeners: ƒ reactiveSetter(newVal)get focused: ƒ proxyGetter()set focused: ƒ proxySetter(val)get innerError: ƒ proxyGetter()set innerError: ƒ proxySetter(val)get innerErrorMessage: ƒ proxyGetter()set innerErrorMessage: ƒ proxySetter(val)get innerLoading: ƒ proxyGetter()set innerLoading: ƒ proxySetter(val)get innerValue: ƒ proxyGetter()set innerValue: ƒ proxySetter(val)get isDirty: ƒ proxyGetter()set isDirty: ƒ proxySetter(val)__proto__: Vue
Thanks a lot for your help 