一个模板中的事件触发其他模板中的函数

Question

当有两个或两个以上时sliders in the same template, and they have :drag-end="myFunc(flower)", events fire on every value change and on all sliders. So myFunc fires on all sliders。

<template>
<div>
    <div v-for="flower in flowers">
            <slider ref="slider" v-model="flower.value" :drag-end="myFunc(flower)"></slider>
    </div>

    <div v-for="tree in trees">
            <slider ref="slider" v-model="tree.value" :drag-end="myFunc(tree)"></slider>
    </div>
<div>
</template>
<script>
const Slider = require('../controls/slider.vue');

module.exports = {

    methods: {
        myFunc: function (plant) {
            console.log("Plant value", plant.value);
        },
    },
    components: {
        Slider
    },
    mounted: function () {

    },
    data() {
        return { }
    }
}
</script>

Answer 1

您应该为每个滑块声明一个不同的函数。

<template>
<div>
    <div v-for="flower in flowers">
            <slider ref="slider" v-model="flower.value" :drag-end="funcFlower(flower)"></slider>
    </div>

    <div v-for="tree in trees">
            <slider ref="slider" v-model="tree.value" :drag-end="funcTree(tree)"></slider>
    </div>
<div>
</template>
<script>
const Slider = require('../controls/slider.vue');

module.exports = {

    methods: {
        funcFlower: function (plant) {
            console.log("Plant value", plant.value);
        },
        funcTree: function (plant) {
            console.log("Plant value", plant.value);
        },
    },
    components: {
        Slider
    },
    mounted: function () {

    },
    data() {
        return { }
    }
}
</script>

Answer 2

正如我在文档中看到的那样，drag-end 是事件，因此应该将其用作事件：

<div v-for="flower in flowers">
        <slider ref="slider" v-model="flower.value" @drag-end="myFunc(flower)"></slider>
</div>

<div v-for="tree in trees">
        <slider ref="slider" v-model="tree.value" @drag-end="myFunc(tree)"></slider>
</div>

一个模板中的事件触发其他模板中的函数

Event in one template fires function in others templates

javascript

vue.js

vue-component

vuejs2