Javascript – Vue-Label hat keine Wirkung, wenn es eine Komponente enthält

Question

vue-Projekt
Verwenden Sie das Label-Label für eine Eingabe (Datei-Upload)
Es gibt eine Komponente im Label
Ein Klick auf die Komponente ruft keinen Input-Upload auf
Ich habe ein anderes Label geschrieben und ein paar Wörter darin eingegeben
Sie können anrufen Eingabe nach dem Klicken auf
Was ist das Problem?

Folgendes kann nicht aufgerufen werden

<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>
      ...

Wenn es wie folgt aussieht, können Sie es nennen

<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 并列试试