VueJS（Buefy）：当内联编辑不起作用时，专注于输入元素

Question

我正在使用VueJS和Buefy作为Todo前端。我正在将项目添加到正确显示在表中的数组中。我想通过双击一个项目来使用内联编辑（然后，一个文本框似乎可以编辑该项目）。

我正在这样做，如下：

<div class="content" >
  <b-table :data="todos" :bordered=true>
    <template slot-scope="props">
      <b-table-column v-if="!props.row.editing" @dblclick.native="editTodo(props.row)" field="name" label="Name" width="200" >{{props.row.name}}</b-table-column>
      <b-table-column v-else field="name" label="Name" @keyup.native.enter="doneEdit(props.row)">
         <b-input v-focus v-model="props.row.name" width="200"></b-input>
      </b-table-column>
    </template>
  </b-table>
</div>

我在数组中保留一个“编辑”字段，并且有一个方法editTodo和doneEdit

methods: {
    editTodo(obj) {
      obj.editing = true
    },
    doneEdit(obj) {
      obj.editing = false
    },
}

要专注于输入元素（双击时），我使用如下的自定义指令：

directives: {
  focus: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

我尝试了许多不同的解决方案，但无法正常工作。任何帮助表示赞赏！