javascript - 如何获取事件按钮 ref 属性并将其分配给 vue.js 中的变量

Question

我有一个包含 4 个按钮的页面:

<button ref='butOne' @click="saveRef">One</button>
<button ref='butTwo' @click="saveRef">Two</button>
<button ref='butThree' @click="saveRef">Three</button>
<button ref='butFour' @click="saveRef">Four</button>

我希望 saveRef() 函数将按下的按钮的引用保存到 reference 等变量中。该函数会是什么样子？

data: function(){
    return {
        reference:""
    }
},

methods:{
    saveRef(){
        // what should go here?
    }
}

Answer 1

您可以将引用按钮的名称作为 saveRef 方法的参数传递，如下所示:

<button ref='butOne' @click="saveRef('butOne')">One</button>

在方法代码中:

methods:{
    saveRef(btn){
         this.reference=this.$refs[btn] // reference the button element which name passed as parameter
    }
}