vue.js - vue的v-for单元如何进行dom选择操作

问题描述

问 题

这个编辑部分我是用的一个无框的input操作的，数据操作部分都已调通。我疑惑的是，如何在点击li对象后，自动定位到li内部的input,并且focus这个input，jquery单独的写法我会，但是不知道如何与vue的@click想结合。

<ul class="tree_wl" v-cloak>
    <li v-for="el in sort_list" :class=[($index==sortCurrent?"active":""),("level"+el.Level)] @dblclick="editSort($index)">
        <h4 v-if="$index!=sortCurrent">{{el.MaterTypeID}} {{el.MaterTypeName}}--{{el.Level}}</h4>
        <input type="text" v-model="strWriting" v-if="$index==sortCurrent">
        //无关部分省略...
    </li>
</ul>

解决方案

其实原理是一样的，代码逻辑过多，我就不直接实现你的代码了，简化一个版本给你

    <div id="app">
        <ol>
            <li :index="index" @dblclick="editSort">
                <h4></h4>
                <input type="text">
            </li>
        </ol>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                index: 1
            },
            methods: {
                editSort: function(e) {
                    var index = e.target.getAttribute('index');
                    e.target.children[1].focus();
                }
            }
        });
    </script>

这篇关于vue.js - vue的v-for单元如何进行dom选择操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！