I am facing an issue with two independent components in my Vue instance. I have a select component and an input component, both of which are siblings. I need to trigger a focus event on the input component when the select component is changed.
Since both components are created from templates, using the ref attribute is not an option according to the Vue documentation https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs
Any suggestions on how I can achieve this? I have provided a simple example in this codepen - https://codepen.io/anon/pen/MVmLVZ
HTML
<div id='my-app'>
<some-select></some-select>
<some-input></some-input>
</div>
<script type="text/x-template" id="vueTemplate-some-select">
<select @change="doStuff">
<option value='1'>Value 1</option>
<option value='2'>Value 2</option>
</select>
</script>
<script type="text/x-template" id="vueTemplate-some-input">
<input ref='text-some-input' type='text' value='Some Value'/>
</script>
Vue Code
Vue.component('some-input', {
template: `#vueTemplate-some-input`
});
Vue.component('some-select', {
methods: {
doStuff: function() {
// Do some stuff
//TODO: Now focus on input text field
//this.$refs['text-some-input'].focus(); // Cant use refs, refs is empty
}
},
template: `#vueTemplate-some-select`
});
var app = new Vue({
el: '#my-app'
});