I'm using this code to shift focus between text inputs in a v-for list:
HTML
<input :ref="'inputField' + index" #keydown.down="movedown(index)" type="text"
enter code here`v-model="todo.text">
JS
movedown: function(index){
this.$nextTick(() =>
this.$refs["inputField" + (1 + index)][0].focus()
);
}
It works fine when the input-fields are in the same component as the v-for. However, when I move the input-fields and the code to a child component I instead get an error that "this.$refs[("inputField" + (1 + index))] is undefined".
Here is a working JSFiddle where you can move down inputs with down-arrow: https://jsfiddle.net/Gnopps/w5xqa1r9/
Here is the same code, but in a child component and you can no longer move down: https://jsfiddle.net/Gnopps/y17en6o4/
Would anyone have any idea how I can fix this so that I can shift focus also with the input-fields in a child component?
ljubadr's answer in the comments worked perferctly. Basically move ref to parent and then this.$refs["inputField" + (1 + index)][0].$el.focus():
You can try something like this. When you press down, component will emit event to parent, and parent will focus next component
Related
when using el-dropdown of https://element.eleme.io/#/en-US/component/dropdown, how do I trigger the dropdown or hide it with code, when split-button is true? I can do it easily when I was using React and bootstrap with ref or bootstrap control
You can achieve that by adding a ref to el-dropdown element.
<el-dropdown ref="dropdownElement" split-button type="primary" #click="handleClick">
Then, In the handleClick() method you can access the split-button flag true/false and then do the code as per your requirement.
if (this.$refs.dropdownElement.splitButton) {
// write your code here
}
I'm using vue-tippy 6.0.0-alpha.63 for vue3.
I have a single component on the page which has a dynamic content and want to make a tooltip from it. This tooltip should be shown when user moves mouse over one of many buttons with class skill_tab. Those buttons are nested deeply inside the parent component of the current component.
I wrapped the component content with a <tippy> component and I'm trying to bind the tooltip to the buttons using to prop but it doesn't work.
I also tried using the triggerTarget prop providing the class .skill_tab as the value, but it looks like triggerTarget only works with refs.
Component for a button:
SkillTab.Vue
<div class="skill_tab">
...
</div>
Component for the tooltip:
SkillTooltip.Vue
<tippy followCursor=true to=".skill_tab" allowHtml=true placement="bottom-end" interactive=true>
<div id="skill_tooltip" class="skill_tooltip" :class="{active}" v-if="active">
...
</div>
</tippy>
Is there any way to bind the tooltip to all the buttons without passing refs via a global state or any other simple way?
I have two children components (CModal1 and CModal2) inside a parent component and both of them are wrapper in the ModalWrapper component. This wrapper component gives each modal a transition effect and a close event (an X button and a background that both emit the close event).
Right now, if the outter most layer's (Modal2) close buttons are clicked, it also closes Modal1. Is this because both #close events fire?
How can I remedy this? Should I put the wrapper of Modal2 inside the actual component, rather than wrapping it in the parent?
If I haven't explained things correctly, or you need more code/context, please let me know.
Cheers!
ParentComponent
<template>
<ModalWrapper
#close="modal1Open = false"
:isVisible="modal1IsVisible"
>
<CModal1
v-if="modal1IsVisible"
:formData="formData"
#close="modal1IsVisible = false"
#save-data="(val) => saveData(val)"
#open-modal-2-clicked="modal2Open = true"
/>
</ModalWrapper>
<ModalWrapper
#close="modal2Open = false"
:isVisible="modal2Open"
class="z-30"
>
<CModal2
v-if="modal2IsVisible"
#close="modal2IsVisible = false"
/>
</ModalWrapper>
</template>
Hi all: I have a modal that I would like the buttons to be passed through slots, each with its own events. The problem is that when I click on the button, the event fires but the parent can't hear it.
<template>
<modal-detail v-if="viewModal" title="Modifica brands" #close="viewModal=false">
<!-- <template #header><p>ciao bob</p></template> -->
<template #body>
sdfgsfgddd
</template>
<template #actions>
<button-cancel buttonText="cancella" #click="$emit('close')"></button-cancel>
<button-confirm buttonText="conferma" #click="$emit('confirm')"></button-confirm>
</template>
</modal-detail>
</template>
The problem is thath #close="something" is never called.
Suggestion?
Thanks, all
It seems like you're using a custom component button. You either need to bind the #click handler to prop callback or use #click.native to apply the click handler.
To help debugging events and other issues such as with Vuex in the future, you can use the Vue browser dev tools.
If you install that plugin, and check the events stream you can see what events are being emitted by what. For example, if you haven't correctly set up your click handler with your custom button then you won't see the event getting emitted.
I am using Vue 2 and I am using an anchor tag as a "button" (for styling purposes with an svg).
The drawback of using an anchor tag in this way is that you can't disable it in the same way as a button.
I would like to make a vue component that simply wraps an anchor tag. I would like the component to pass all properties of the custom component onto the child anchor tag so that someone can use it like this:
<custom-comp id="closeButton" title="Close" class="c-btn" #click="close" :disable="true"></custom-comp>
I want to intercept the click on the child anchor tag and only emit that if the component is not disabled.
How can I achieve this?
You can't. disable property is used only in form elements. What you're looking for here is to use v-if:
<a id="closeButton" title="Close" class="c-btn" #click="close" v-if="isConditionMatched">
Only show if isConditionMatched returns true
</a>
Or, conditionally you can use return false statement inside your method:
close() {
if(!isConditionMatched) return false;
// continue your close function
}