Vue Dynamic List

Question

I'm creating a basic MTG Deckbuilder using Vue.Js. I'm trying to have the user type the card name into an input box then when the button is clicked, the deck list is update with the card name. Currently,the list add's a blank element for the card instead of the card name. Any ideas?

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>

hgiasac · Accepted Answer · 2018-08-11 16:35:53Z

1

Because you push string item instead of object

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

Correct template will be {{ item }}, not {{ item.card }}

answered Aug 11, 2018 at 16:35

hgiasac

2,23319 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Helping hand · Accepted Answer · 2018-08-11 16:36:26Z

0

This is because you are not emitting any data in your $emit

Try this, In deckbuilder.vue

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

In app.vue

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

In html, v-for should be this way

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

answered Aug 11, 2018 at 16:36

Helping hand

2,9602 gold badges21 silver badges33 bronze badges

Comments

Shady Tawfik · Accepted Answer · 2022-07-22 18:36:05Z

0

Try This

 <!-- Menu Content -->
    <ul class="nav-list" style="overflow: visible;">
      <!-- Items -->
      <span v-for="(menuItem, index) in menuItems" :key="index">
        <li>
          <nuxt-link :to="menuItem.link" :class="menuItem.class">
            <i class="bx" :class="menuItem.icon || 'bx-square-rounded'" />
            <!-- Link Name -->
            <span class="links_name">{{ menuItem.name }}</span>
          </nuxt-link>
        </li>
      </span>
    </ul>
<script> 
 export default {
  name: 'SidebarMenu',
    menuItems: {
      type: Array,
      default: () => [
        {
          link: '/',
          name: '_home',
          icon: 'bx-home',
          class: '',
        },
        {
          link: '/blog',
          name: '_blog',
          icon: 'bx-edit',
          class: '',
        },
        {
          link: '/projects',
          name: '_projects',
          icon: 'bx-code',
          class: ''
        },
        {
          link: '/about',
          name: '_about',
          icon: 'bx-user',
          class: ''
        },
      ],
    },
}
</script>

answered Jul 22, 2022 at 18:36

Shady Tawfik

11 bronze badge

1 Comment

Gavin Morrow Over a year ago

Can you add details to explain why this works?

Collectives™ on Stack Overflow

Vue Dynamic List

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related