故事:刚接触iview没几天,遇到了这么个问题,如下的报错信息,虽然对页面的布局和数据没有任何影响,但是vue.js里面对这个页面进行了异常抛出了,作为程序员是非常难受的,尤其是在刚接触一门新语言的时候,代码还没怎么弄明白呢,就有错误,都不知道是怎么回事,是会对代码的质量造成混淆的。

 问题:报错如下,从字面意思就是vue找不到form的实例,给抛出了异常:

vue.js:616 [Vue warn]: Injection "FormInstance" not found

found in

---> <FormItem>
       <ICol>
         <Header>
           <Layout>
             <Content>
               <Layout>
                 <Root>

原因:我在写代码的时候,按钮的那一行的代码我移除form了,但是我还是带着form标签里面才有的标签属性,所以vue在加载页面的时候检测不到form的信息,但是却检测到了form标签才有的属性的时候,给抛出了“找不到form实例”的这么一个挺抓挠的提示。

错误代码如下:

<Layout>
    <i-Header data-actionpanel :style="{height:ActionHeight+'px'}">
        <i-Col :xxl="16" :xl="16" :lg="16" :md="16">
            <Form-item :label-width="10"> 这句代码是<i-form></i-form>标签才有的属性
                <i-button type="info" @click="query"><@s.message code ="ACTION.QUERY"/></i-button>
                <i-button type="info" @click="importKshc">导入考生号</i-button>
                <i-button type="info" @click="uploadXszpButton">导入考生照片</i-button>
            </Form-item>
        </i-Col>
    </i-Header>
</Layout>

实际应该是:

<Layout>
    <i-Header data-actionpanel :style="{height:ActionHeight+'px'}">
        <i-Col :xxl="16" :xl="16" :lg="16" :md="16">
            <i-button type="info" @click="query"><@s.message code ="ACTION.QUERY"/></i-button>
            <i-button type="info" @click="importKshc">导入考生号</i-button>
            <i-button type="info" @click="uploadXszpButton">导入考生照片</i-button>
        </i-Col>
    </i-Header>
</Layout>

总结:不是自己写出来的代码,就一定要小心,小心,再小心。

Logo

前往低代码交流专区

更多推荐