Vue.js プロパティを上書きする処理のバグ

クリックしたら、プロパティが上書きされる処理の配列名を引数でメソッドに渡したい

HTML
1<ul>
2        <li v-for="(boss,index) in bosses" v-bind:key="boss.name">
3        　<span v-on:click="work(index,'bosses')">{{boss.state}}</span>
4        　{{boss.name}}
5        </li>
6</ul>

Vue.js

Vue.js
1var app = new Vue({
2    el: '#app',
3    data: {   
4             bosses: [
5                {
6                    state: "出社",
7                    name: '田中',
8                },
9
10                {
11                    state: "出社",
12                    name: '山田',
13                },
14
15            ],
16          }
17    methods: {
18          work: function (index,value) {
19              alert(value);
20              if (this.value[index].state === "出社") {
21                  this.value[index].state = "在宅";
22              } else if (this.value[index].state === "在宅") {
23                  this.value[index].state = "休み";
24              } else if (this.value[index].state === "休み") {
25                  this.value[index].state = "出社";
26              }
27             },
28    })

試したこと

alertにはbossesと表示されるが、stateは上書きされません。
引数を使わずにbossesと書けば、きちんと動きます。

質問

なぜ、このプログラムは動かないのでしょうか？

※
長いソースコードを切り抜いたので、ほかに不具合があり可能性があります

ku__ra__ge

2021/08/13 12:59

提示されたコードは文法エラーで動きません。正しく動作するコードを提示してください。

cat_is_freedom

2021/08/13 13:03

正しく動作しない理由がわからず、コードを載せました。

ku__ra__ge

2021/08/13 13:18 編集

質問文のコードを動作させようとしても、文法エラーでスクリプトは一切動きません。「alertにはbossesと表示される」という動作確認すらできないはずです。質問をするのであれば、実際に問題となる動作が確認できるコードを提示してください。

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

回答1件

ベストアンサー

なぜ、このプログラムは動かないのでしょうか？

this.valueは、thisオブジェクトのvalueメンバを示すからです。
valueという名前のメンバは存在しません。

あなたが行いたいことは、thisオブジェクトの「value変数に入った文字列」のメンバを示すことだと思います。
それはthis[value]のように記述します。
オブジェクトのメンバを参照する方法を確認してください。

プロパティアクセサー - JavaScript | MDN

以下が実際に動作するサンプルです。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script src="https://cdn.jsdelivr.net/npm/vue"></script>
6</head>
7<body>
8
9<div id="app">
10<ul>
11  <li v-for="(boss,index) in bosses" v-bind:key="boss.name">
12    <span v-on:click="work(index,'bosses')">{{boss.state}}</span>
13    {{boss.name}}
14  </li>
15</ul>
16</div>
17
18<script>
19var app = new Vue({
20  el: '#app',
21  data: {
22     bosses: [
23       {
24         state: "出社",
25         name: '田中',
26       },
27       {
28         state: "出社",
29         name: '山田',
30       },
31     ],
32  },
33  methods: {
34    work: function (index, value) {
35      if (this[value][index].state === "出社") {
36          this[value][index].state = "在宅";
37      } else if (this[value][index].state === "在宅") {
38          this[value][index].state = "休み";
39      } else if (this[value][index].state === "休み") {
40          this[value][index].state = "出社";
41      }
42    },
43  },
44});
45</script>
46
47</body>
48</html>