CODEWITHSUNDEEP
vue.js
sinak
sinak

Reputation: 242

use jquery function in vue methods

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>

Upvotes: 1

Views: 2063

Answers (1)

Bert
Bert

Reputation: 82449

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.

Upvotes: 1

Related Questions