If the el-dialog has not opened before,elements under el-dialog cannot be retrieved using this.$refs as elements has not rendered.
I want to know how to render el-dialog but not show it because I need to initialize something in el-dialog.
You can use vm.$nextTick( [callback] )
Example
in methods
OpenDialog() {
this.dialogFormVisible = true; // your dialog toggle variable
this.$nextTick(() => {
// some action or your this.$refs will here
});
},
Reference
https://v2.vuejs.org/v2/api/#vm-nextTick
Related
I have existing web app in Vue. Now I need to create an event for each input/textarea focus. Is it possible to bind it globally so I don't have to add #focus="function" to each element?
Why wouldn't it be possible?
Get required elements
Assign whatever functionality you want
mounted () {
// Get all input elements with class="CLASS_NAME"
const inputs = document.querySelectorAll('input.CLASS_NAME')
// Iterate over elements and add each one of them a `focus` listener
inputs.forEach(input => {
input.addEventListener('focus', this.inputFocusHandler)
})
},
methods: {
inputFocusHandler (event) {
...
}
}
A modal is opened, which has multiple pages. For the navigation I'm using frame navigation. There is a close button on every page clicking on which closes the modal.
What I'm doing now is passing this.$modal as a property to each page which creates a long chain of property passing and on each page I just do this.modal.close() where this.modal is the property of the component that refers to the this.$modal of the first page.
I was wondering if there was a better way, such as accessing the topmost open modal and closing it.
I'm using nativescript-vue and the builtin nativescript modals
Please note that I have multiple modals in other parts of my application. there is only this one that has navigation in it.
A small improvement could be saving the modal into the Vuex store, accessing it anytime instead of chaining props.
Detach modal component by plugin.
const modalDialog = {
install (Vue, options = {}) {
// ...
}
}
Vue.use(modalDialog)
Designate Vue prototype for plugin.
const modalDialog = {
install (Vue, options = {}) {
Vue.prototype.$modal = {
show () {
// ...
},
hide () {
// ..
}
}
}
}
Vue.use(modalDialog)
this.$modal is accessible from all components.
this.$modal.show() // or hide()
I have a side-nav component that is hidden by default using v-show.
A click event in an external component sets a flag in vuex to toggle the side-nav.
How can I set focus to the side-nav component's root div once it's displayed?
I am trying to use this focus-on focus-off technique to hide the side-nav
Maybe something like this:
export default {
watch: {
someVarFromVuex(value) {
// Don't focus unless the value got switched on
if (!value) return;
// Make sure to add the ref to your template.
// You could also use an id.
const $input = this.$refs.input.$el;
// Just in case the input somehow doesn't exist...
if ($input) {
this.$nextTick(() => {
$input.focus();
})
}
},
},
};
Note that if you are actually trying to focus a div, then it will need to have a tabindex.
I'm using el-select and use object as options in VUE with element UI.
{id:'123',name:'label1'}
Bind id to value and name to label of options.
When I change v-model to id '123', the options with name 'label1' can't be selected and '123' is displayed in el-select. the drop down menu has the desired options and an extra '123' option.
What I need is the option will be selected when I change v-model.
In a editable el-select element, press Enter to trigger below method:
baseAttributeValueChange(attrId, values) { //Enter pressed
var vm = this;
if (this.getAttributeValueById(values[attrId])) { //Skip this block
} else { //HERE
var attrValue = values[attrId];
values[attrId] = null;
apiProduct.createAttributeValue(this.GLOBAL.axios, this.getCategoryId(), attrId, attrValue).then(
(res) => {
vm.loadAttributeValues(attrId).then(() => {
values[attrId] = '';//That's my temporary solution
vm.$nextTick(() => {
values[attrId] = res.id;
})
})
});
}
},
The options array returned by a method, Is the el-select can't detect data changes in a method so it will not update the options menu.
I can't resolve my question directly. But I found that el-select has not watched v-model changes. So I changed a variable to trigger el-select render. Then use vm.$nextTick() to v-model.
I am trying to create a generic HTML Window from Vue application.
What I want
I click "edit" on item from list, a DHTML popup will be opened with a Vue component inside. I can click Save or close the opened component need to removed from the page and may the caller recive a event/promise with resolve (Save) or reject (Close).
What I am tried
I was started via DOM:
function Win(vueapp,obj) {
var div = document.createElement("div");
var Win = JQueryOldFunction()
//need a way to resolve when the user hit 'Save' and reject when closing
var resolve,reject, promise = new Promise(function(a, b) {
resolve=a, reject=b;
});
new Vue({
el: div,
data: {data:obj} //need a way to pass it to the component
render: function (h) {
return h("m");
},
components: {
'm': httpVueLoader(vueapp+'.vue') // this from https://github.com/FranckFreiburger/http-vue-loader
}
});
return promise;
}
This is working, but I can't use Vue to destroy the window after clicking save, and can't pass objects inside
so I was tried other option:
<component :is="gui.window" transition="fade" transition-mode="out-in"></component>
Model.gui.window='EditGroup'
(took from here: https://coligo.io/dynamic-components-in-vuejs/ )
This is better, it working, does not allowing more than one window, but the internal component can't destroy itself.