Vue.js mouseOver & mouseLeave Event

vuejs mouseOver & mouseLeave Event

to change css (include click event)

<div class="row" id="tabs">

<div class="col tab" id="tab0" :style="first" @click.self="changeTab(0)" @mouseover="changeColor('Orange', 0)" @mouseleave="changeColor('White', 0)">ARS 상담</div>

<div class="col tab" id="tab1" @click.self="changeTab(1)" @mouseover="changeColor('Orange', 1)" @mouseleave="changeColor('White', 1)">홈페이지 상담</div>

<div class="col tab" id="tab2" @click.self="changeTab(2)" @mouseover="changeColor('Orange', 2)" @mouseleave="changeColor('White', 2)">이메일 상담</div>

<div class="col tab" id="tab3" @click.self="changeTab(3)" @mouseover="changeColor('Orange', 3)" @mouseleave="changeColor('White', 3)">카카오톡 상담</div>

</div>

methods: {

changeTab : function (tab) {

var id = ""

var backgroundColor = ""

var fontColor = ""

id = "#tab" + (this.tab_data + "")

backgroundColor = "white"

fontColor = "black"

$(id).css("background-color", backgroundColor)

$(id).css("color", fontColor)

 

this.tab_data = tab

id = "#tab" + (tab + "")

backgroundColor = this.colorOrange

fontColor = "white"

$(id).css("background-color", backgroundColor)

$(id).css("color", fontColor)

},

changeColor : function (color, id) {

if (color == "White" && id ==this.tab_data) {

return

}

var id = "#tab" + (id + "")

var backgroundColor = ""

var fontColor = ""

if (color == "Orange") {

backgroundColor = this.colorOrange

fontColor = "white"

}

if (color == "White") {

backgroundColor = "white"

fontColor = "black"

}

$(id).css("background-color", backgroundColor)

$(id).css("color", fontColor)

}

},