use jquery function in vue methods

Question

i want to use jquery function (closest) in vue component and get ancestor with class mainBox but doesnt work and errors me that this.closest is not function

sorry im newbie in vue

this is my SubmitPhoneForm component:

<template>
  <div>
    <div class="formBox">
      <form>
        <input type="tel" placeholder="insert phone"/>
        <input type="button" name="next" class="next action-button" value="Next" @click="changecolor()" />
      </form>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    changecolor () {
      this.closest('.mainBox').css({'background': 'black'})
    }
  }
}
</script>

and this is component that i use the component named SubmitPhoneForm in it :

<template>
    <div>
      <div class="mainBox">
        <div class="screenBox">
          <div class="contentBox">
            <div class="title">title</div>
            <div class="description">description</div>
            <div class="moreDescription"></div>
            <submit-phone-form></submit-phone-form>
          </div>
          <div class="carBox"></div>
        </div>
      </div>
    </div>
</template>

Bert · Accepted Answer · 2018-08-02 13:59:12Z

1

In Vue, what you would really want to do is emit an event from the child, and listen to that event in the parent and let the parent manage the color changing.

Here is a small example of that in action.

console.clear()
Vue.component("color-picker", {
  template: `<button @click="changeColor">Change color</button>`,
  methods:{
    changeColor(){
      // this random color picker is straight from 
      // https://www.paulirish.com/2009/random-hex-color-code-snippets/
      // Essentially, what you want to do here is tell the parent 
      // that something has changed in the child and the parent should
      // react accordingly.
      this.$emit('change-color', `#${Math.floor(Math.random()*16777215).toString(16)}`)
    }                             
  }
})

new Vue({
  el: "#app",
  data:{
    color: "#f9f9f9"
  },
})

.container {
  width: 300px;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.box {
  margin: 3em 0;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <div class="container">
    <div class="box" :style="{backgroundColor: color}"></div>
    <color-picker @change-color="color = $event"></color-picker>
  </div>
</div>

In the child component, emit an event.

this.$emit('change-color', <some optional value>)

And in the parent, listen for that event.

<color-picker @change-color="color = $event"></color-picker>

The @change-color="..." is setting up an event handler listening to the change-color event from the child. In this case, what happens is the color value passed from the child is used to update the color value in the parent.

Then, because the parent is binding the background color of the .box div to the data value, color, the color is automatically updated.

edited Aug 2, 2018 at 13:59

answered Aug 2, 2018 at 13:53

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sinak Over a year ago

anyway how can i use closest function!! im confused

Bert Over a year ago

@sinak Vue is not jQuery, there is no closest function on this. It would be $(some selector).closest(...). Use at your own risk.

Collectives™ on Stack Overflow

use jquery function in vue methods

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related