Vue.js 使用特定索引值处的数据更新 html

Question

我只是混合使用 vue.js 和 vanilla 来尝试创建一个二十一点游戏。我将所有卡片数据存储在 vue data() 中，例如：

data(){
  return {
    cards: [
      {id: 1, cardName: 'Ace of Spades', cardPic: '🂡', color: 'black', value: 1},
      {id: 2, cardName: 'Ace of Clubs', cardPic: '🃑', color: 'black', value: 1},
      {id: 3, cardName: 'Ace of Heats', cardPic: '🂱', color: 'red', value: 1},
      {id: 4, cardName: 'Ace of Diamonds', cardPic: '🃁', color: 'red', value: 1},
    ]
  }
} 

我还构建了一个随机发生器来选择一个随机数，该随机数可用于在数据中的相同索引值处抓取卡片。然后，我就能够使用类似这样的内容手动获取索引值处的卡片数据（对于索引值 0 中的第一张卡片）：

<div class="card">
    <div class="cPic" v-bind:style="{color: cards[0].color}">{{cards[0].cardPic}}</div>
    <div class="cName">{{cards[0].cardName}}</div>
</div>

但是，我想在单击绘制新卡片时动态更新此 HTML，其中数据来自新的随机索引值，即：

{{cards[3].cardPic}}

或

{{cards[1].cardPic}}

我尝试简单地用这个更新 HTML（随机数存储在变量

randomCard

中）：

document.querySelector('.card').innerHTML = `
    <div class="cPic" v-bind:style="{color: cards[` + randomCard + `].color}">{{cards[` + randomCard + `].cardPic}}</div>
    <div class="cName">{{cards[` + randomCard + `].cardName}}</div>
`;

然而，正如我预期的那样，像这样更新 DOM 是行不通的，尽管它提取了随机数，但它并没有从 Vue data() 中提取实际数据。我一直无法弄清楚如何以另一种方式实际做到这一点。

有关如何使用随机索引值的新数据更新卡有什么帮助吗？谢谢

Answer 1

只需使用随机选择的卡片的参考：

参见 Vue SFC Playground

<script setup>
import { ref } from 'vue'

const cards = [
      {id: 1, cardName: 'Ace of Spades', cardPic: '🂡', color: 'black', value: 1},
      {id: 2, cardName: 'Ace of Clubs', cardPic: '🃑', color: 'black', value: 1},
      {id: 3, cardName: 'Ace of Heats', cardPic: '🂱', color: 'red', value: 1},
      {id: 4, cardName: 'Ace of Diamonds', cardPic: '🃁', color: 'red', value: 1},
    ]

const card = ref();

pickCard();

function pickCard(){
  card.value = cards[cards.length * Math.random() | 0];
}

</script>

<template>
<div class="card">
    <div class="cPic" v-bind:style="{color: card.color}">{{card.cardPic}}</div>
    <div class="cName">{{card.cardName}}</div>
</div>
<button @click="pickCard">Pick card</button>
</template>