Execute a nested function in vue

Question

I have two functions that are nested in vue, the parent function is supposed to get the value of an attribute, while the child is supposed to use the value of the attribute to make an api call. How can I execute this function once to ensure I get this attribute and make the api call at once?

   //button with the attribute I want
    <button :data-post-id="My id">Click Me</button>
   //Here I'm calling the parent function
        <button @click="getPostId">Submit to api</button>

Javascript

getPostId: function (evt) {
                    const postId = evt.target.getAttribute('data-postid');
                    //console.log(postId);
                    function usePostId(){
                      console.log("I am accessible here " +postId)//null  
                    }
                    return usePostId()


                }

you're probably trying to simply your problem but something is getting lost. recreate your problem here codesandbox.io/s/vue — A. L
– A. L, Commented Apr 25, 2018 at 9:01

Niklesh Raut · Accepted Answer · 2018-04-25 11:02:52Z

2

Your approach will create function multiple time, Just start with the simple function and keep separate.

new Vue({
  el: '#app',
  data: {
    postid: ''
  },
  methods:{
    setPostId: function (id){
      this.postid = id;
    },
    getPostId: function () {
      console.log(this.postid);
    }
  }
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
  <button @click="setPostId(11)">Set 11</button>
  <button @click="setPostId(22)">Set 22</button>
  <button @click="setPostId(33)">Set 33</button>
  <button @click="getPostId">Get postid</button> 
  <div>{{postid}}</div>
</div>

edited Apr 25, 2018 at 11:02

answered Apr 25, 2018 at 9:30

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

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

Comments

Umair Abid · Accepted Answer · 2018-04-25 09:07:24Z

1

I am no vue expert but I can spot one inconsistency.

You are binding your callback to child but set the attr data-post-id on parent and then expecting child to have that attr. Also, it seems the attribute name doesn't match i.e. what you have set and what you are trying to get.

As for the original problem, i am not sure why you didn't add the attribute to child element as well and in case you can't do that you will need to find the desired parent through DOM.

answered Apr 25, 2018 at 9:07

Umair Abid

1,4632 gold badges19 silver badges36 bronze badges

Comments

RuNpiXelruN · Accepted Answer · 2018-04-25 11:08:28Z

0

@mots you could do something like the below,

usePostId: function(id) {
  console.log("I am accessible here " + id)
},

getPostId: function(evt) {
  const postId = evt.target.getAttribute('data-post-id')
  const output = this.usePostId(postId)
  return output
}

answered Apr 25, 2018 at 11:08

RuNpiXelruN

1,9202 gold badges19 silver badges24 bronze badges

Collectives™ on Stack Overflow

Execute a nested function in vue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related