在Vue中将方法调用为另一个方法

时间:2018-09-06 13:42:26

标签: vuejs2

我正在尝试从vue中的另一个方法内部调用一个方法。

我得到的是控制台中未定义的,但是我真正想要的是在getId函数中调用的ID

总体而言,我要做的就是使用addEvent函数获取复选框事件,这样我就可以从中获取对或错,然后将其发送到saveCheckbox函数,并从saveCheckbox函数调用getId函数以获取该特定复选框的ID。

我希望我能够正确解释它。如果仍不清楚,请告诉我。

这就是我所拥有的

<template>
   <div class="card-body">
       <table class="table">
           <thead class="thead-dark">
               <tr>
                   <th scope="col">Active</th>
                    <th scope="col">Title</th>
               </tr>
           </thead>

           <tbody>
               <tr v-for="(category, index) in categories" >
                    <td>
                        <input name="active" type="checkbox" v-model="category.active" @change="getId(category.id)" @click="addEvent">
                    </td>

                    <td>
                        {{ category.title }}
                    </td>
               </tr>
           </tbody>
       </table>
   </div>
</template>

<script>

    export default {

        props: [
            'attributes'

        ],

        data(){
            return {
                categories: this.attributes,
            }
        },

        methods: {
            getId(id){

                console.log(id);

                return id
            },

            saveCheckbox(event){

                console.log(this.getId());

            },

            addEvent ({ type, target }) {
              const event = {
                  type,
                  isCheckbox: target.type === 'checkbox',
                  target: {
                    value: target.value,
                    checked: target.checked
                  }
              }

                this.saveCheckbox(event.target.checked)

            }
        },

        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

2 个答案:

答案 0 :(得分:1)

您必须将参数(Id)传递给getId方法

答案 1 :(得分:0)

具有排序概述,您没有将任何ID传递给该方法,而是尝试返回该ID。所以也许,那是没有定义的?

方法调用做得很好。用这个。之前的关键字