javascript - label vue tidak mempunyai kesan jika ia mengandungi komponen

Question

projek vue
Gunakan label label untuk input (muat naik fail)
Terdapat komponen dalam label
Mengklik pada komponen tidak memanggil muat naik input
Saya menulis label lain dan menaip beberapa perkataan di dalamnya
Anda boleh menghubungi input selepas mengklik
Apakah masalahnya?

Yang berikut tidak boleh dipanggil

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

Jika seperti berikut, boleh panggil

<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

Kenapa struktur komponen ini sangat kucar-kacir

Letakkan label di luar muat naik fail dan cuba bersebelahan dengan muat naik fail