プロパティ？へのアクセスの仕方について

Question

以下のコードを実行したところ、this.$refs.tdではアクセスできないようです。
これはthis.$refsがプロパティを持っていないということだと思うのですが、
td.horseのエレメントにアクセスするにはどのようにしたらよいでしょうか？
またconsole.log(this.$refs);でプロパティのように見えるものは何でしょうか？

fittingCallback: function(idx) {
            const obj = {td:["a","b"]}
            console.log(obj);
            console.log(obj.td);

            console.log(this.$refs);
            console.log(this.$refs.td);
        }

chromeのコンソール

再現コード

Comments

[Lhankor_Mhy]

問題を再現可能なコードをご提示いただけますか？

---

>またconsole.log(this.$refs);でプロパティのように見えるものは何でしょうか？

推測ですが↓これでは。

> これらのブラウザで記録されるのはオブジェクトへのリファレンスです。そのため、console.log() を呼び出した時点でのオブジェクトの値が表示されるのではなく、内容を見るために展開させた時点での値が表示されます。
https://developer.mozilla.org/ja/docs/Web/API/Console/log

[rururu3]

すいません、Vue部分とHTML部分のソース提示お願いいたします。

[nullbot]

コードを追記しました。
なるほど、タイミングの問題でしょうか？

Answer 1

Lhankor_Mhyさんが書かれている

これらのブラウザで記録されるのはオブジェクトへのリファレンスです。そのため、console.log() を呼び出した時点でのオブジェクトの値が表示されるのではなく、内容を見るために展開させた時点での値が表示されます。

https://developer.mozilla.org/ja/docs/Web/API/Console/log

で間違いないです(Parcelで再現させてみてブレイクポイントつけてやってみたところ全部空オブジェクトになりました。)

mountedでやったら取れました。

Comments

[rururu3]

ちょっと状況違いました。再現させて修正しますのでお待ち下さい

[Lhankor_Mhy]

横からすみません。

this.$refs.td
と
this.$refs['td']
は、等価だと思っていたのですが……

[Lhankor_Mhy]

かぶった

[rururu3]

そう思ったので、ちょっと画像のようなデータになるように再現させようと思ったのですが、できないんですよねぇ…HTML部分提示してもらったほうが良さそうですね

[Lhankor_Mhy]

ですね。

[rururu3]

ちょっと勘違い回答なので、この回答消します。

[rururu3]

削除ポリシーに反するようなので回答編集します