Question

我有两个嵌套在vue中的函数，父函数应该获取属性的值，而子元素应该使用属性的值来进行api调用。如何执行此功能一次以确保我获得此属性并立即进行api调用？

   //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()


                }

Answer 1

您的方法将多次创建函数，只需从简单函数开始并保持独立。

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>

Answer 2

我不是vue专家，但我发现一个不一致。

您正在将回调绑定到子级，但在父级上设置attr data-post-id，然后期望子级具有该attr。此外，似乎属性名称不匹配，即您设置的内容和您想要获得的内容。

至于原始问题，我不确定为什么你也没有将属性添加到子元素中，如果你不能这样做，你需要通过DOM找到所需的父元素。

Answer 3

@mots你可以做类似下面的事情，

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
}

在vue中执行嵌套函数

3 个答案: