v-on click, ajouter un gestionnaire uniquement si la condition a été remplie

ici:

click: dataType === `section` ? toggleSectionElements : ()=>{}

dans le cas différent, vous passez null, mais la valeur au clic attend une fonction. vous pouvez essayer une fonction emptry:

click: dataType === `section` ? toggleSectionElements : null

Modifiez-le simplement comme suit et cela fonctionnera

v-on="condition ? { mouseover } : {}"

ou, si votre gestionnaire s'appelle mouseover

v-on="condition ? { mouseover: handler } : {}"

Au lieu de polluer votre modèle avec une logique ternaire, vous devriez plutôt effectuer la vérification à l'intérieur du gestionnaire de clics. Cela rend non seulement votre modèle plus lisible, mais facilite également la maintenance du code puisque toute la logique a été abstraite et déléguée au rappel du gestionnaire d'événements.

Solution rapide

Par conséquent, la solution rapide consiste en fait à assurez-vous que toggleSectionElements () ne fonctionnera que lorsqu'un dataType correct est présent. Ceci peut être réalisé en utilisant une clause de garde:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-collection />
</div>

<script type="text/x-template" id="my-collection-component">
  <div>
    <component
      v-for="(item, i) in collection"
      v-bind:key="i"
      v-bind:is="componentToUse(item.dataType)"
      v-bind:itemData="item" />
  </div>
</script>

<script type="text/x-template" id="my-section-component">
  <div @click="toggle" class="box">
    <h1>{{ itemData.dataType }}</h1>
    <p>{{ itemData.description }}</p>
    <p>Clicking on me will invoke a section-specific logic</p>
  </div>
</script>

<script type="text/x-template" id="my-element-component">
  <div class="box">
    <h1>{{ itemData.dataType }}</h1>
    <p>{{ itemData.description }}</p>
    <p>Clicking on me will do nothing</p>
  </div>
</script>

Encore mieux, c'est que si des gestionnaires séparés doivent être attribués à chaque dataType : vous pouvez alors créer une fonction d'usine à cet effet:

.box {
  border: 1px solid #999;
  cursor: pointer;
  margin: 10px;
  padding: 10px;
}

.box:hover {
  background-color: #eee;
}

Suggestion: utiliser des composants atomiques

Puisqu'il peut être coûteux de lier des gestionnaires d'événements de clic à des éléments qui finissent par ne rien faire, vous pouvez également décomposer votre composant pour qu'il soit plus atomique. L'élément de collection sera responsable de recevoir un tableau de "section" ou "élément", et chaque "section" / "élément" aura son propre composant, quelque chose comme ceci:

• Vous avez un composant de collection, disons , qui contient tous les composants "section" et "élément"
Le composant
• "section" utilisera le composant
Le composant
• "element" utilisera le composant

C'est là que VueJS devient vraiment puissant: vous pouvez utiliser composant dynamique dans pour déterminer quel composant utiliser en fonction du dataType rencontré.

Cela se fait en exécutant un v-for à travers la collection, puis en utilisant v-bind: is = "..." pour déterminer si un élément de collection spécifique doit utiliser "section" ou "élément". Je comprends que cela va probablement sortir du cadre de votre question initiale, mais c'est une conception intéressante à prendre en compte:

const collectionComponent = Vue.component('my-collection', {
  template: '#my-collection-component',
  data: function() {
    return {
      collection: [{
        dataType: 'section',
        description: 'Hello I am section 1'
      }, {
        dataType: 'element',
        description: 'Hello I am element 1'
      }, {
        dataType: 'section',
        description: 'Hello I am section 2'
      }, {
        dataType: 'element',
        description: 'Hello I am element 2'
      }]
    }
  },
  methods: {
    componentToUse(dataType) {
      return 'my-' + dataType;
    }
  }
});

const sectionComponent = Vue.component('my-section', {
  template: '#my-section-component',
  props: ['itemData'],
  methods: {
    toggle() {
      console.log('Doing some magic.');
    }
  }
});

const elementComponent = Vue.component('my-element', {
  template: '#my-element-component',
  props: ['itemData']
});

new Vue({
  el: '#app'
});

methods: {
  // This is just a factory function
  toggleElements() {
    switch (this.dataType()) {
      case 'section':
        return this.toggleSectionElements;
      case 'element':
        // Something else...
    }
  },
  toggleSectionElements() {
    // Magic for section element
  }
}

toggleSectionElements() {
  // Guard clause to prevent further code execution
  if (this.dataType() !== 'section')
    return;

  // Magic here
}