Vue.js 洗牌组件

Question

I'm making a cup game in Vue.js where there are N number of cups in line and one of them has a dice inside it.

<cup cupid="a" @onGameStateChange="onGameStateChange" ref="cup" />
<cup cupid="b" @onGameStateChange="onGameStateChange" ref="cup" />
<cup cupid="c" @onGameStateChange="onGameStateChange" ref="cup" />

I would now like to shuffle those cups to move any of the cups around the play field. Naturally it would mean that I have to move the DOM elements around.

But I seem to be a bit stuck on how I would achieve this in Vue.js. I tried attaching a ref (like above) to all of the cups and then getting the DOM element reference for all of the cups but now I'm a bit wondering how would I shuffle those around.

I also tried loading the cups from a data array in v-for and then shuffling the cups data property but visually it didn't seem to do anything. I also tried it through a compute property.

With Vue.js the fist rule is not to manipulate DOM directly, so how would I achieve this?

Answer 1

Just think in MVVM way. Your game and three cups are just data, do not mix them up with DOM.

I write an example blow. Use an array to store cups. Use 'v-for' to generate DOM. Shuffle the Cups by "random sort" or "random an array index"!

 var demo = new Vue({ el: '#demo', data: { cups: [{name: "cup1"}, {name: "cup2"}, {name: "cup3", imhere: true}] }, methods: { shuffleCups() { this.cups.sort((a, b) => Math.random() > .5 ? -1 : 1); } }, })

 <script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script> <div id="demo"> <button @click="shuffleCups">Shuffle</button> <div v-for="cup in cups"> {{ cup.name }} <span v-if="cup.imhere" style="color: red">*</span> </div> </div>

Update: After written this snippet, I found an example on vuejs.org , it also shows "Transitions & Animation" effect.