How to perform vue.js mouseover event only on on icon of textbox

Question

<b-input type="tel" placeholder="Customer Mobile No" name="contactNumber" ref="contactNumber"
          @blur="getCustomer(bill.customer.contactNumber)"
          @input="getCustomer(bill.customer.contactNumber)"
          icon="phone_android"
          tabindex="2"
          title="Customer's mobile number"
          maxlength="10" minlength="10" pattern="\d{10}" v-model="bill.customer.contactNumber"
          :disabled="isDefaultCustomer || (bill.couponDiscount > 0 || bill.giftcertificateAmount > 0 || isExchangeCustomer)" required>
        </b-input>

How to apply mouseover event of vue.js only on icon attribute of b-input tag

Answer 1

To capture the mouseover event, you have to pass @mouseover.native="someFunction" to you b-input component as

Vue.use(Buefy.default)


const example = {
  data() {
    return {
      name: 'John Silver'
    }
  },

  methods: {
    something () {
      alert('hovering over input')
    }
  }
}


const app = new Vue(example)

app.$mount('#app')

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<link href="https://unpkg.com/buefy@0.6.3/lib/buefy.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/buefy@0.6.3/lib/index.js"></script>


<div id="app" class="container">

  <section>
    <b-field label="Name" @mouseover.native="something">
      <b-input v-model="name"></b-input>
    </b-field>
  </section>

</div>