Vue.jsで子コンポーネントのメソッドを使用したい

Question

前提・実現したいこと

Djangoでwebアプリを作成しており、template内でVue.jsを使用しています。
axiosでデータを取ってきた後、それに対応したコンポーネントのメソッドを使用したいです。

発生している問題・エラーメッセージ

TypeError: Cannot read property 'isGood' of undefined
    at VueComponent.isGood (myscript.js:152)
    at Vue.<anonymous> (myscript.js:178)

該当のソースコード

<div id="article">
    {% for article in articles %}

    <article-good ref="{{ article.id }}" data-id="{{ article.id }}" data-count="{{ article.good_count }}">
    </article-good>

    {% endfor %}
</div>

var articleGood = {
    delimiters: ['[[ ', ']]'],
    data: function () {
        return {
            gooded: false,
            good_count: 0,
        }
    },
    mounted: function () {
        var elm = this.$el;
        var count = elm.getAttribute('data-count');
        var id = elm.getAttribute('data-id');
        this.good_count = Number(count);
    },
    template: '<div><i :class="heart" @click="changeGood"></i><span>[[ good_count ]]</span></div>',
    computed: {
        heart: function () {
            return {
                fas: this.gooded,
                far: !this.gooded,
                'fa-heart': true,
                'fa-blue': true
            }
        }
    },
    methods: {
        //goodボタンが押された時の切り替え
        changeGood: function () {
            if (this.gooded) {
                this.good_count -= 1;
            } else {
                this.good_count += 1;
            }
            this.gooded = !this.gooded;
        },
        //既にgoodされていたときはボタンをオンにする
        isGood: function () {
            this.$refs[id].isGood(); //(← 152行目)
            this.gooded = true;
        }
    }
}

new Vue({
    el: '#article',
    delimiters: ['[[ ', ']]'],
    components: {
        'article-good': articleGood,
    },
    mounted: function () {
        axios.get('/snsapp/gooded_articles/')
            .then(function (response) {
                var article_ids = response.data.article_ids;
                console.log(article_ids);　//(1)
                for (var i = 0; i < article_ids.length; i++) {
                    id = String(article_ids[i]);
                    console.log(id); //(2)
                    console.log(this.$refs); //(3)
                    console.log(this.$refs[id]); //(4)
                    this.$refs[id].isGood();　//(5) (← 178行目)
                };
                console.log(this.gooded_articles);
            }.bind(this))
            .catch(function (error) {
                console.log(error);
            }.bind(this));
    },
});

試したこと

#######consoleの結果

(1) : (2) [1, 3]
(2) : 1
(3) : {1: VueComponent, 2: VueComponent, 3: VueComponent, 6: VueComponent, 7: VueComponent, 8: VueComponent, 9: VueComponent}
(4) : VueComponent
(5) : TypeError: Cannot read property 'isGood' of undefined
    at VueComponent.isGood (myscript.js:152)
    at Vue.<anonymous> (myscript.js:178)

Vue.js公式ガイド/特別な問題に対処するを参考にしてref属性を設置して試してみたのですが上手くいきません。
また、公式ガイドを読んでもどのようにメソッド呼び出しているのかいまいちよく分かりません。

”公式ガイド一部抜粋”

methods: {
// 親からインプット要素をフォーカスするために使われる
focus: function () {
this.$refs.input.focus()
}
}

これはfocusメソッドが自分自身を呼び出している？

必要であればDjango側のコードも載せます。
よろしくお願いします。

###補足
お二方の回答でご指摘いただいた箇所を修正したらコンポーネントは呼び出せたようですが、メソッドを使おうとするとエラーが出ます。
エラー内容は上記の通りです。
よろしくお願いします。

Answer 1

                for (var i = 0; i < article_ids.length; i++) {
                    id = String(article_ids[i]);
                    console.log(id); //(2)
                    console.log(this.$refs); //(3)
                    console.log(this.$refs.id); //(4)
                    this.$refs.id.isGood();　//(5)
                };

console.log(this.$refs.id); //(4)のidってもしかしてid = String(article_ids[i]);の値を利用したいってことであれば
console.log(this.$refs[id]); //(4)こうするのがただしいですよ(5)も同様

Comments

[shun173]

ご指摘いただいた箇所を修正しました。
よろしければご回答お願いします。

[rururu3]

処理まで追っかける気ないけど
//既にgoodされていたときはボタンをオンにする
isGood: function () {
this.$refs.id.isGood();
this.gooded = true;
}
の部分のisGood呼び出しでエラー出てますよ

[shun173]

返信ありがとうございます。

this.$refs.id.isGood();　→　this.$refs[id].isGood();
は修正しました。

エラーが出ているのは分かるのですが、その原因が分からないです。
この部分は公式ガイドを参考にしたのですが、そもそも関数の中で自分自身を呼び出している？のがよくわからないです。
初歩的な質問ですみません。
ご回答いただけると嬉しいです。

[rururu3]

this.$refs.id
ではだめで
this.$refs[id]
なら大丈夫っていう理由がわからないってことでいい？

[shun173]

返信ありがとうございます。

いえそうではなく、this.$refs[id].isGood()　と修正したうえで出るエラーの原因が分かりません。
親のVueから子のisGoodメソッドを使用したいのですが、

TypeError: Cannot read property 'isGood' of undefined
at VueComponent.isGood (myscript.js:152)
at Vue.<anonymous> (myscript.js:178)

このようなエラーが出ます。

this.$refs[id]と記述する理由も正直よくわかっていないのですが(笑)、連想配列からキーで指定するというイメージで納得しています。

[rururu3]

this.$refs[id].isGood(); //(← 152行目)
ここでのthisはvueコンポーネントオブジェクトになるのでthis.$refsには自身の子に関するrefの参照が入ってます
なのでアクセスできないのと、152行目のは自身のisGood呼び出すって感じなのだからthis.isGood()でいいのでは？

[shun173]

返信ありがとうございます。
そもそも152行目が丸ごと不要でした笑
長々とお付き合いいただき大変ありがとうございました！

Answer 2

createdの時点ではまだthis.$refsが正しくセットされていないため、うまく動作していないのだと思います。
代わりにmountedを利用してみてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="vue-app">
  <child-component ref="child" />
</div>

<script>
var childComponent = {
  data: function() { return {"message": ""}; },
  template : '<span>{{ message }}</span>',
  methods  : { "hoge": function() { this.message = "child method called!"; } },
};

new Vue({
  el: '#vue-app',
  components: {
    'child-component': childComponent,
  },
  mounted: function() {
    this.$refs.child.hoge();
  }
})
</script>

</body>
</html>

Comments

[shun173]

ご指摘いただいた箇所を修正しました。
よろしければご回答お願いします。

[ku__ra__ge]

修正を行ったことで「Vue.jsで子コンポーネントのメソッドを使用したい」という目的は既に達成されているように思えます。
追記されたエラーは子コンポーネントのメソッド呼び出された結果、そのメソッドの実行中に発生しているのではないでしょうか？

isGood: function () {
this.$refs[id].isGood(); //(← 152行目)
this.gooded = true;
}
の「(← 152行目)」で呼び出された子コンポーネントのisGoodメソッド内でさらに別のisGoodを呼び出そうとしているように見えますが、この行は不要に思えます。
質問者さんは、何を行う意図でこの行を書いているのでしょうか？

[shun173]

返信ありがとうございます。
おっしゃる通りこの行は不要だったようで、これを丸ごと削除したところ上手くいきました。