Vue.js Passing variable from one component to another (jQuery)

Question

I have a component called ShowComment and a component called EditComment.

In ShowComment there is a variable this.CommentRecID. I want to use this variable in the component EditComment.

The problem is that a console.log(this.CommentRecID); shows that the variable is undefined in EditComment, but defined in ShowComment, but I don't know why it's undefined:

I used this to "use" this.CommentRecID in EditComment, but I don't know if this is the correct way to do it because it's related to jquery:

import * as $ from "jquery";
import DatePicker from "vue2-datepicker";

export default {
    props: ["CommentRecID"],
    components: { DatePicker },

Here's the full ShowComment component: https://pastebin.com/fcy4PCq0

Here's the full Editcomment component: https://pastebin.com/uik7EwD1

I'm fairly new to Vue.js. Does someone know how one can solve this issue?

Answer 1

You should not use jQuery and Vue.js at the same time.

You should try to use props to send data from parent to child.

You could add EditComment as an element in your ShowComment something like this:

<EditComment CommentRecID="this.CommentRecID" v-if="showEdit" />

And toggle the showEdit flag from the editItem method

editItem() {
 this.showEdit = true
}

If you want to show a modal, then your EditComment component is probably up the tree so you could either use EventBus or use Vuex.

It seems like you are already using Vuex in your project, so add a mutation that stores the CommentRecID and use it in a similar manner to show the dialog.