一個模板中的事件觸發其他模板中的功能

Question

當同一個模板中有兩個或更多個sliders並且它們具有:drag-end="myFunc(flower)"時，事件觸發每個值更改以及所有sliders。所以myFunc在所有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

正如我在文檔看，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> 

Answer 2

您應該爲每個滑塊聲明不同的函數。

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