Javascript Vue动态列表

我正在使用Vue.Js创建一个基本MTG Deckbuilder。我试图让用户在输入框中键入卡片名称，然后单击按钮时，卡片组列表将更新为卡片名称。目前，列表添加是卡片的空白元素，而不是卡片名称。有什么想法吗

app.Vue：

<template>
  <div id="app">
    <deckBuilder @addCard="addCard" :title="title" :card="card" :deck="deck" />
  </div>
</template>

<script>
import deckBuilder from './components/deckBuilder'
export default {
  name: 'app',
  components: {
    deckBuilder,
  },
  data: () => ({
    title: 'MTG Deck Builder',
    card: {
      name: '',
    },
    deck:[],
  }),
  methods: {
    addCard: function(event,) {
      this.deck.push(this.card.name);
    },
  },
}
</script>

从“./components/deckBuilder”导入deckBuilder
导出默认值{
名称：“应用程序”，
组成部分：{
甲板建造商，
},
数据：（）=>({
标题：“MTG甲板建造商”，
卡片：{
名称：“”，
},
甲板：[]，
}),
方法：{
addCard:函数（事件）{
this.deck.push（this.card.name）；
},
},
}

deckBuilder.Vue：

<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="card.name" placeholder="Type a Card Name" />
    <p> the card is: {{ card.name }}
    <button @click="addCard">Add!</button>
    <h2>Deck</h2>
    <ul>
      <li v-for="item in deck">{{ item.card }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'deckBuilder',
  props: ['title', 'card', 'deck'],
  methods: {
    addCard() {
      this.$emit('addCard')
    }
  },
}
</script>

{{title}}
卡片是：{card.name}
添加
甲板

{{item.card}

导出默认值{
名称：“deckBuilder”，
道具：[‘头衔’、‘卡片’、‘牌组’]，
方法：{
addCard（）{
此.$emit（'addCard'））
}
},
}

因为您推送的是字符串项而不是对象

this.deck.push（this.card.name）；

---

正确的模板将是

{{item}

，而不是

{{{item.card}

这是因为您没有在

$emit

中发送任何数据

试试这个， 在deckbuilder.vue中

addCard() { 
   this.$emit('addCard',this.card.name); 
}

在app.vue中

addCard: function(cardName){ 
  this.deck.push(cardName); 
}

在html中，

v-for

应该是这样的

<li v-for="item in deck">{{ item }}</li> 

{{item}

很高兴它有帮助：）