Question

经过一番研究，您发现了Evan You先生的以下建议： https://github.com/vuejs/vue/issues/7349#issuecomment-354937350

所以我毫不犹豫地尝试了一下：

组件模板

<template>
  <div v-on='{ click: dataType === `section` ? toggleSectionElements : null }'>
    ... magic 
  </div>
<template>

JS逻辑

<script>
export default {
  name: `product-section`,
  props: [`section`, `sectionName`, `depth`],
  methods: {
    toggleSectionElements() {
      ... magic 
    }
  },
  computed: {
    dataType() {
      if (this.$props.section.sections || this.$props.depth === 0) {
        return `section`
      } else {
        return `element`
      }
    }
  }
}
</script>

但是对于上述情况，在渲染过程中会导致错误：

[Vue warn]: Invalid handler for event "click": got null

有人可以建议做错了什么吗？：思考：

更新
Data Model的样子如下：

DataModel: {
  mainSectionA: {
    sections: {
      sectionA: {
        sections: {
          elementA: { values: { ... } },     
          elementB: { values: { ... } }
        }
        values: { ... }
      }
      sectionB: {
        elementA: { values: { ... } },
        elementB: { values: { ... } }
      }
    },
    values: { ... }
  },
  mainSectionB: {
    sections: {
      elementA: { values: { ... } },
      elementB: { values: { ... } },  
      elementC: { values: { ... } },
      ... elements
    },
    values: { ... }
  }
}

Answer 1

实际上，您应该在点击处理程序中执行检查，而不是使用三元逻辑来污染模板。这不仅使您的模板更具可读性，而且由于所有逻辑均已抽象并委托给事件处理程序的回调，因此使代码维护更加容易。

快速解决方案

因此，快速的解决方案是实际上确保toggleSectionElements()仅在存在正确的dataType时才起作用。这可以通过使用保护子句来实现：

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

  // Magic here
}

更好的是，如果应该为每个dataType分配单独的处理程序：则可以为此目的创建一个工厂函数：

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

建议：使用原子组件

由于将单击事件处理程序绑定到最终无能为力的元素可能会很昂贵，因此您还可以分解组件以使其更具原子性。集合元素将负责接收“部分”或“元素”的数组，并且每个“部分” /“元素”将具有其自己的组件，如下所示：

您有一个集合组件，例如<my-collection>，其中包含所有“节”和“元素”组件
“部分”组件将使用<my-section>组件
“元素”组件将使用<my-element>组件

这是VueJS真正强大的时候：您可以在<my-collection>中使用dynamic component来确定要使用的组件，具体取决于遇到的dataType。

这是通过在整个集合中运行v-for，然后使用v-bind:is="..."来确定某个特定的集合项应使用“节”还是“元素”来完成的。我知道这可能超出您最初提出的问题的范围，但这是一个值得考虑的设计：

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'
});

.box {
  border: 1px solid #999;
  cursor: pointer;
  margin: 10px;
  padding: 10px;
}

.box:hover {
  background-color: #eee;
}

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

Answer 2

只需将其更改为以下内容即可使用

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

或者，如果您的处理程序称为mouseover

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

Answer 3

此处：

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

在不相等的情况下，您传递null，但是click值需要一个函数。您可以尝试使用清空功能：

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

v-on单击，仅在满足条件的情况下添加处理程序

3 个答案:

快速解决方案

建议：使用原子组件