Question

找不到标题的合适名称，如果有人想出一个更好的名字，我们将非常高兴。

我有一个代表产品卡的组件。整个组件都包装在<router-link>中，这会转到产品页面。

但是，我有另一种情况，当我不需要该组件引至产品页面时，却需要执行其他一些操作。

我发现的唯一解决方案是将回调函数作为道具传递，并基于此执行以下操作：

<router-link v-if="!onClickCallback">
    ... here goes the whole component template ...
</router-link>
<div v-if="onClickCallback" @click="onClickCallback">
    ... here again goes the whole component template ...
</div>

如何在不复制粘贴整个组件的情况下执行此操作？我尝试执行此操作（实际代码示例）：

  <router-link class="clothing-item-card-preview"
               :class="classes"
               :style="previewStyle"
               :to="{ name: 'clothingItem', params: { id: this.clothingItem.id }}"
               v-on="{ click: onClick ? onClick : null }">

但是我得到了：Invalid handler for event "click": got null

此外，不确定是否可以通过prevent修饰符进行点击，这看起来很奇怪，应该有一个更好的体系结构解决方案

Answer 1

注释该错误，您可以在实际代码段中使用空函数代替null

  <router-link class="clothing-item-card-preview"
           :class="classes"
           :style="previewStyle"
           :to="{ name: 'clothingItem', params: { id: this.clothingItem.id }}"
           v-on="{ click: onClick ? onClick : null }">

Answer 2

这应该可行（将“ router-link”替换为a，然后插入正确的属性）进一步的信息：

https://fr.vuejs.org/v2/guide/components-dynamic-async.html
v-bind只是一个对象，其中每个键都是组件的道具，因此在这里，我以编程方式定义了一个对象，该对象取决于包装器（路由器链接或简单的div）。但是，我们不能对事件执行此操作（当然，我们可以创建自己的事件侦听器，但这有点棘手），所以我只是一个handle方法。

new Vue({
    el: "#app",
    data: {
		  products : [{onClickCallback : () => { alert("callback"); return true;}}, {}, {}]
    },
    methods : {
        handleClick(product, event) {
            if (!product.onClickCallback) return false
            product.onClickCallback()
            return true
        },
        getMyComponentName(product) {
            if (product.onClickCallback) return "div"
            return "a"
        },

        getMyComponentProperties(product) {
            if (product.onClickCallback) return {is : "div"}
            return {
                is : "a",
                href: "!#"
            }
        }
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <component
        v-for="(product, index) in products"
        :key="index"
        v-bind="getMyComponentProperties(product)"
        @click="handleClick(product, $event)"
    >
        <div class="product-card">
            <div class="product-card-content">
                <span v-show="product.onClickCallback">I'm a callback</span>
                <span v-show="!product.onClickCallback">I'm a router link</span>
            </div>
        </div>
    </component>
</div>

Answer 3

您有使用Format: $this->something function executed with => aFunction with argument(s) < $fnStrArgument value > anotherFunction with argument(s) < $fnIntArgument value >吗？如果可以放心使用<router-link>，则可以使用类似的

<div>

和

<div @click="handleClick" ...>
  <!-- component template -->
</div>

请参见https://router.vuejs.org/guide/essentials/navigation.html

VueJS中的条件链接行为

3 个答案: