如何知道vue.js中哪个输入是焦点？

在下面的示例中，可以使用两个按钮轻松记录inputBox的值（我知道这一部分）。但是还有第三个按钮，其工作是记录处于焦点/活动状态的inputBox的值。如何在vue.js中实现这一点

<div id="app">
    <br><br><br>
      <div v-for="(item,index) in items" :key="index">
        <input type="text" v-model="items[index]" >
        <button type="submit" @click.prevent="logThisBoxVal(index)">
          log this Box
        </button>
      </div>
      <!-- ToDo -->
      <br><br>
      <button>logActiveBox</button>
  </div>

<script>
    var application = new Vue({
      el: app,
      created() {

      },
      data() {
        return {
          items: [
            "box1", "box2"
          ]
        };
      },
      methods: {
        logThisBoxVal(i) {
          console.log(this.items[i])
        }
      },
      computed: {

      },

    })
  </script>

把这个盒子记录下来



日志框
var应用程序=新的Vue({
el:应用程序，
创建（）{
},
数据（）{
返回{
项目：[
“框1”、“框2”
]
};
},
方法：{
logThisBoxVal（一）{
console.log（this.items[i]）
}
},
计算：{
},
})

一种方法是在输入中添加一个焦点事件，该事件将其定义为活动，然后在单击logActiveBox按钮时使用该事件选择要控制台的事件。如果未选择任何事件，则不输出到控制台。不知道你为什么需要这个

var应用程序=新的Vue({
el:“#应用程序”，
数据（）{
返回{
活动：空，
项目：[
“框1”、“框2”
]
};
},
方法：{
logThisBoxVal（一）{
this.active=typeof i！=“未定义”？i:this.active
如果（this.active！==null）{
console.log（this.items[this.active]）
}
}
}
})

/*忽略-用于减少SO的控制台输出*/
.作为控制台包装{
高度：20px
}

把这个盒子记录下来
日志框