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

Question

这个编辑部分我是用的一个无框的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>

Answer 1

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

    <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>

Answer 2

指令http://cn.vuejs.org/v2/guide/...

Answer 3

官网文档的这个例子里，双击 todolist ，有一毛一样的效果。
TODOMVC