vue里面的methods写了方法，为什么渲染的时候还是报未定义

Question

我是通过html引入vue.js使用的，我确定引用没问题，去掉事件就能正常渲染

html部分

<div class="form">
    <el-form id="auth-form" ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称">
            <el-input v-model="form.permission" @change="inputvalue"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单">
            <el-select v-model="form.parentId" placeholder="不选择则表示这是顶级菜单" id="parentId">
                <el-option
                        v-for="item in form.selectOptions"
                        :key="item.id"
                        :label="item.perssion"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="菜单url">
            <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="">立即创建</el-button>
            <el-button type="primary" @click="close">取消</el-button>
        </el-form-item>
    </el-form>
</div>

js部分

authForm = new Vue({
    el: "#auth-form",
    data: {
        form: {
            permission: "",
            url: "",
            parentId: "",
            selectOptions: {}
        },
        methods: {
            inputvalue:function(){
              console.log(authForm.form.permission);
            },
            close: function () {
                console.log("关闭");
                parent.form.dialogVisible = false;
                authForm.resetFields();
            },
            commit: function (event) {
                $.ajax({
                    type: "post",//访问url类型（get,post）
                    url: BaseUrl + "admin/permission/addPermission.adm",//url地址
                    async: false,//是否异步加载，true为异步加载，false为同步加载
                    data: {
                        permission: authForm.form.permission,
                        parentId: authForm.form.parentId,
                        url: authForm.form.url
                    },//发送数据
                    dataType: "text",//数据类型
                    success: function (result) {//成功返回
                        var data = JSON.parse(result);
                        console.log(data);
                        console.log(data.data);
                        if (data.state = 200) {

                        } else {
                            console.log(result);
                            this.$message(result.msg);
                        }
                    },
                    error: function (errorMsg) {//返回失败
                        this.$message('数据返回错误');
                        
                        
                    }
                });
            }
        }
    }
});

渲染报错

ReferenceError: inputvalue is not defined

Answer 1

你的methods为什么套在data里

Answer 2

data(){     return{}, },methods:{     //这里写方法 },