【Vue.js】連想配列内の数値のカウントが実行されなくて困っています。

今、Vue.jsとVuexを使って、備品の個数管理をするアプリを作成しています。

機能は、以下を実装しようとしています。

ユーザーが入力欄に入力した品目名がToDoリストアプリのように表示される。
表示された品目名の横には、Deleteボタンと個数のカウントアップボタン(plus)・現在の個数を表す数字・カウントダウンボタン(minus)が表示される。
カウントアップボタン(plus)・カウントダウンボタン(minus)を押すと、真ん中の現在の個数を表す数字が変わる。
deleteボタンでその品目が削除される。

現在困っていること

品目を追加したら、品目名・Deleteボタン・カウントアップボタン(plus)・現在の個数を表す数字・カウントダウンボタン(minus)を表示することはできたのですが、
カウントアップボタン(plus)やカウントダウンボタン(minus)ボタンを押しても、真ん中の現在の個数を表す数字が変わらず、困っています。
カウントアップボタン(plus)やカウントダウンボタン(minus)ボタンを押した時に、真ん中の数字はどうなっているのか、consoleで表示したところ、NaNになってしまっていました。
Number()やparseInt()も実行してみましたが、結果は変わりませんでした。
(以下にconsoleでの表示を画像で提示しております。)

どのようにすれば、解決するのか、ヒントや考え方だけでも教えていただけると、非常に助かります。
よろしくお願い致します。

consoleでの表示

説明](032e0c1af1352fd295bc43d5bf5e8029.png)イメージ説明](304ff730a7fdc7bfff2c7028d3716a1e.png)

現在のコード

JavaScript
1// index.js
2import Vue from 'vue'
3import Vuex from 'vuex'
4
5Vue.use(Vuex)
6
7export default new Vuex.Store({
8  state: {
9    items: [{
10      name: 'あ',
11      count: 0
12    }]
13  },
14
15  getters: {
16    items(state) {
17      return state.items
18    },
19    count(state) {
20      return state.items.count
21    }
22  },
23  mutations: {
24    addItem(state, payload) {
25      state.items.push(payload.item)
26    },
27    deleteItem(state, index) {
28      let indexed = state.items.indexOf(index);
29      state.items.splice(indexed, 1)
30      console.log('click')
31    },
32    minus(state, payload) {
33      /*state.items.count -= 1
34      state.items.splice()
35      console.log('click')*/
36      state.items.count -= payload.dec
37      console.log(state.items)
38      console.log(state.items.name)
39      console.log(state.items.count)
40    },
41    plus(state, payload) {
42      /*state.items.count += 1
43      state.items.splice()
44      console.log('click')
45      console.log(state.items)*/
46      state.items.count += payload.inc
47      console.log(state.items)
48      console.log(state.items.name)
49      console.log(state.items.count)
50    }
51  },
52  actions: {
53    minus(store, payload) {
54      store.commit('minus', payload)
55    },
56    plus(store, payload) {
57      store.commit('plus', payload)
58    }
59  }
60})
61

JavaScript
1// App.vue
2<template>
3  <div id='app'>
4    <h1>備品管理</h1>
5    <form v-on:submit.prevent="onclick">
6      <label for='name'>品目名</label>
7      <input type='text' id='name' v-model='name' required />
8      <input type='submit' value='登録' />
9    </form>
10    <ul v-for='(item, index) in items' :key='index'>
11    <li>
12      {{ item.name }}
13      <input type='button' value='delete' v-on:click="deleteItem" />
14      <input type="button" value="plus" @click="plus()"/>
15        {{ item.count }}
16      <input type="button" value="minus" @click="minus()"/>
17    </li>
18    </ul>
19  </div>
20</template>
21
22<script>
23export default {
24  name: 'app',
25  computed: {
26    items() {
27      return this.$store.getters.items
28    },
29    count() {
30      return this.$store.getters.items.count
31    }
32  },
33  data() {
34    return {
35      name: ''
36    }
37  },
38  methods: {
39    onclick() {
40      this.$store.commit('addItem', {
41        item: {
42          name: this.name,
43          count: 0
44        }
45      })
46    },
47    deleteItem() {
48      this.$store.commit('deleteItem')
49    },
50    minus(x = 1) {
51      this.$store.dispatch('minus', {
52        dec: x
53      })
54    },
55    plus(y = 1) {
56      this.$store.dispatch('plus', { 
57        inc: y
58      })
59    }
60  }
61} 
62</script>
63
64<style>
65#app {
66  font-family: Avenir, Helvetica, Arial, sans-serif;
67  -webkit-font-smoothing: antialiased;
68  -moz-osx-font-smoothing: grayscale;
69  text-align: center;
70  color: #2c3e50;
71  margin-top: 60px;
72}
73
74ul li {
75  list-style: none;
76}
77</style>
78

行動規範の内容に同意します

回答1件

ベストアンサー

stateではitemsを配列として定義しているのに

state: {
  items: [
    {
      name: 'あ',
      count: 0
    }
  ]
},

mutationsではitemsを配列として操作していないことが原因です。

minus(state, payload) {
  state.items.count -= payload.dec
  console.log(state.items)
  console.log(state.items.name)
  console.log(state.items.count)
},
plus(state, payload) {
  state.items.count += payload.inc
  console.log(state.items)
  console.log(state.items.name)
  console.log(state.items.count)
}

試しに下記のようにitemsに添え字を指定してみてください。これでitemsが1件の時は、とりあえず増減させることができるようになったと思います。

minus(state, payload) {
  state.items[0].count -= payload.dec
  console.log(state.items[0])
  console.log(state.items[0].name)
  console.log(state.items[0].count)
},
plus(state, payload) {
  state.items[0].count += payload.inc
  console.log(state.items[0])
  console.log(state.items[0].name)
  console.log(state.items[0].count)
}

根本的な対応は下記のように複数のアイテムが登録されていた場合に、どのアイテムに対してプラス／マイナスの操作を行ったかを実装する必要があると思います。

state: {
  items: [
    {
      name: 'あ',
      count: 0
    },
    {
      name: 'い',
      count: 0
    },
    {
      name: 'う',
      count: 0
    }
  ]
},

投稿2020/08/14 11:43

rubytomato

総合スコア1752

退会済みユーザー

2020/08/15 03:45

回答してくださり、ありがとうございます！なんとか、NaNにならず、きちんと数字が動きました。あとは、他の要素のところでボタンを押したら、全部の要素の数字が同時にカウントされてしまうところを頑張ってみます！

rubytomato

2020/08/15 04:06

items配列のどの要素が操作されたかは、要素の位置（index）で特定するのが簡単かもしれません。例えば <input type="button" value="plus" @click="plus()"/> を <input type="button" value="plus" @click="plus(index)"/> のように引数にv-forのindexを渡します。この場合、plus,minusメソッドとミューテーションも修正がいります。

行動規範の内容に同意します