[VUE] v-if为何会令它后面的组件销毁

2020-11-12  本文已影响0人  seasunk
image.png
    <el-form-item required label="路由名称" v-if="isMenu" prop="routeName">
        <el-input v-model="form.routeName" />
    </el-form-item>
    <el-form-item required label="权限ID">
        <permission-cascader ref="permissionCascaderRef" :selectedPermissionId="permissionId"></permission-cascader>
    </el-form-item>

如上面的红,绿框
当v-if生效后,(绿框在红框后面)排在它后面的permissionCascader组件会先销毁一次,
解决方法就是将permissionCascader组件放在v-if的上面。
即将红绿位置互换,如下

    <el-form-item required label="权限ID">
        <permission-cascader ref="permissionCascaderRef" :selectedPermissionId="permissionId"></permission-cascader>
    </el-form-item>
    <el-form-item required label="路由名称" v-if="isMenu" prop="routeName">
        <el-input v-model="form.routeName" />
    </el-form-item>

原因不详。

上一篇 下一篇

猜你喜欢

热点阅读