Question

我正在制作游戏。

控制器添加＆＃34;硬币＆＃34;数据。
当添加硬币时，它会安装一个组件，html会被动画化（使用GSAP的简单精灵动画）
当动画结束时，硬币需要从数据中删除。

这是我奋斗的地方。我不知道如何从数据中删除数组项; ＆＃34; mount（）＆＃34;知道哪个数组键？

我想过将array-index传递给组件;不断变化的意志;硬币随机添加和删除。

我尝试使用splice()，如下所示：How to remove a item from a array Vue.js，但无法使其发挥作用。

由于我认为这是一个非常常见的用例，我想是否有一个直接的解决方案。

我的HTML：

<div class="game">

    <xyz v-for="coin in coins" v-bind:data="coin" is="coin"></xyz>

</div>

我的js：

// Simplified component
// of course the coin has data like value etc.
Vue.component("coin", {
    props: ["data"],

    template: `
        <div class="sprite">
            <img :src="coin' + data.lane . '.png" />
        </div>
    `,

    mounted () {
        // Sprite animation
        var TweenMax ...
        .eventCallback("onComplete", function() {

            // (!)
            // > delete the data entry, that triggered this rendering  
            // (!)

        })
    }
})

// Vue root instance 
var game = new Vue({
    el: ".game",

    data() {
        coins: [
            { lane: 3 },
            { lane: 2 },
            ...
        ]
    }
})

Answer 1

我认为你最好从数组中删除一个硬币，其中硬币被维护（父组件）。并且在您的子组件（硬币）中只需要emit an event告诉父组件动画已经完成，请删除我。

顺便说一句，你可以为每一枚硬币设置一个id，然后你可以很容易地通过id从数组中删除它们。

希望这会有所帮助。

// Simplified component
// of course the coin has data like value etc.
Vue.component("xyz", {
    props: ["data"],

    template: `
        <div class="sprite">
            <!-- <img :src="coin' + data.lane . '.png" /> -->
            <div>{{data.lane}}</div>
        </div>
    `,

    mounted () {
         setTimeout(()=>{
            this.$emit('completed', this.data);
         }, 2000);
    }
})


// Vue root instance 
var game = new Vue({
    el: ".game",

    data() {
    return {
        coins: [
            { id: 1,
            lane: 3 },
            { id:2,
            lane: 2 },
        ]
      }
    },
    methods:{
        onCompleted(data){
          for(var c in this.coins){
			       if(this.coins[c].id === data.id){
				        this.coins.splice(c, 1);
				        break;
			       }
         }
		  }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class="game">

    <xyz v-for="coin in coins" v-bind:data="coin" :key="coin.id" @completed="onCompleted"></xyz>

</div>

Vue.js 2从相应的组件中删除数据（数组项）

1 个答案: