Question

我正在使用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>

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>

Answer 1

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

this.deck.push(this.card.name);

正确的模板将是{{ item }}，而不是{{ item.card }}

Answer 2

这是因为您没有在$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>

Vue动态清单

2 个答案: