nested refs

by Jim Baldwin

HTML

<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
<div id="main">
    <div v-for="(task, index) in taskList">
        <input :ref="ref(index)" type="text" v-model="task.taskName" @keydown.up="arrowPress(index)">
        <div v-for="(child, childIndex) in task.children">
            <input :ref="ref(index, childIndex)" type="text" v-model="task.taskName" @keydown.up="arrowPress(index, childIndex)">
        </div>
    </div>
</div>

JavaScript

var vm = new Vue({
    el: "#main",
    data: {
        taskList: [{
            taskName: "Number One"
        }, {
            taskName: "Number Two",
            children: [{
                taskName: "Child One"
            }, {
                taskName: "Child due"
            }]
        }, {
            taskName: "Number Three"
        }]
    },

    methods: {
        ref(parent, child) {
            let me = 'inputField' + parent.toString().padStart(4, '0');
            if (child !== undefined) me += child.toString().padStart(4, '0');
            return me;
        },
        arrowPress(parent, child) {
            let refs = Object.keys(this.$refs).filter(key => key.indexOf('inputField') === 0).sort();
            let i = refs.indexOf(this.ref(parent, child));
            i = Math.max(i - 1, 0);
            let prevRef = refs[i];
            this.$nextTick(() => this.$refs[prevRef][0].focus());
        }
    }
});