bugfix> vue.js > 投稿

私はVueの基本的な質問だと思うものがありますが、クリック時にメソッドを実行すると同時に、コンポーネントでv-forループを実行しようとしています。

理由はわかりませんが、そのクリックハンドラーで実行できるものは何もありませんが、Vueのドキュメントにはこれが不可能であると書かれているものは何もありません。今は、コンソールログを実行することで解決します。

<IconBox
    v-for="step in steps"
    :key="step.slug"
    :step="step"
    :formData="formData"
    @click="console.log('click')"
/>

IconBox.vueのテンプレートは次のとおりです。

<template>
  <div class="icon-box">
    <div
      class="icon-holder"
      :style="{ backgroundImage: 'url(' + step.image + ')' }"
    >
    </div>
    <div class="text">
      <div class="inner">
        <h5>{{ step.name }}</h5>
        <p v-if="step.description">{{ step.description }}</p>
        {{ isSelected }}
      </div>
    </div>
  </div>
</template>

コンポーネント自体でクリックを実行できますが、選択したブール値を処理するために何が起こっているのかを親がよく知っている必要があります。

回答 2 件
  • コンポーネントタグでネイティブイベントを使用するには、 .native を追加する必要があります  修飾子

    <IconBox @click.native="yourMethod"/>
    
    

    このガイドを確認してください。

    それを確認するには、メソッドを作成し、その中にconsole.log()を追加することをお勧めします。

  • 私は最近Vueをいじくり回していますが、ここで私のプロジェクトで同様の問題を解決しました

    <IconBox
        v-for="step in steps"
        :key="step.slug"
        :step="step"
        :formData="formData"
        @click="console.log('click')"
    />
    
    

    への変更

    <template v-for="step in steps">
        <IconBox
            :key="step.slug"
            :step="step"
            :formData="formData"
            @click="console.log('click')"
        />
    </template>
    
    

あなたの答え