javascript - vue label 里面包含一个组件 就 没效果了

Question

vue项目
使用label标签for到一个input(文件上传)上
label里面是一个组件
点击组件并没有调用input上传
自己又写了一个label 里面随便打了几个字
点击后可以调用input
问题出在哪？

下面这样无法调用

<file-upload id="headUpload" :target="uploadUrl" action="POST" v-on:progress="progress" v-on:start="startUpload" v-on:finish="finishUpload" class="uploadBox"></file-upload>
    <view-box ref="viewBox">
      <label for="headUpload">
        <group gutter="0" style="display:block; overflow:hidden">
          <cell value="修改头像" link="#headUpload">
            <img slot="icon" width="50" style="display:block;margin-right:5px;border-radius:50%" :src="user.head">
          </cell>
        </group>
      </label>
      ...

如果是下面这样则可以调用

<file-upload id="headUpload" :target="uploadUrl" action="POST" v-on:progress="progress" v-on:start="startUpload" v-on:finish="finishUpload" class="uploadBox"></file-upload>
    <view-box ref="viewBox">
      <label for="headUpload">12313131313123132</label>
        <group gutter="0" style="display:block; overflow:hidden">
          <cell value="修改头像" link="#headUpload">
            <img slot="icon" width="50" style="display:block;margin-right:5px;border-radius:50%" :src="user.head">
          </cell>
        </group>
      ...

Answer 1

这个组件结构怎么会这么乱

把 label 放到 file-upload 外面与 file-upload 并列试试