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 並列試試