質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1266閲覧

vuexの配列を取得して配列内の値をv-bind:rowに入れたい

iwanao513

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/11/16 07:36

編集2021/11/16 12:27

vuexで保持している配列をv-forで取得して表示したいです。

そして配列に保持されているvalue値をv-bindで値渡ししようとしているのですがエラーがでて表示すらされません。
原因を教えていただきたいです。

vue

1<template> 2 <div class="sig_inside"> 3 <div v-for="todo in todos" v-bind:key="todo" class="term_jouken"> 4 <div class="termindex">条件{{todo.value+1}} 5 </div> 6 <Sigtermcondi v-bind:row="{term:todo.value}"></Sigtermcondi> 7 </div> 8 </div> 9</template> 10<script> 11export default { 12 computed: { 13 todos:{ 14 get () { 15 16 return this.$store.state.todos 17 }, 18 }, 19 } 20} 21</script>

vuex

1import { createStore } from 'vuex' 2 3export default createStore({ 4 state: { 5 todo:"", 6 todos: [{value:0}], 7 } 8})

todosはボタンを押すとpushされて増えるようになっています。

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

[Vue warn]: Property "this" was accessed during render but is not defined on instance. at <SigTerm row= {buffa: "1", term: 0} > at <SigCondi> at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>
[Vue warn]: Unhandled error during execution of render function at <SigTerm row= {buffa: "1", term: 0} > at <SigCondi> at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next at <SigTerm row= {buffa: "1", term: 0} > at <SigCondi> at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>
TypeError: Cannot read property 'row' of undefined at Proxy.get (sig_termcondi.vue?d6a3:2959) at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160) at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:1086) at Object.get [as thisbuffano] (runtime-core.esm-bundler.js?5c40:2109) at Object.get (runtime-core.esm-bundler.js?5c40:5940) at Proxy.get (sig_termcondi.vue?d6a3:2959) at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160) at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:1086) at Object.get [as term1] (runtime-core.esm-bundler.js?5c40:2109) at Proxy.render (sig_termcondi.vue?d6a3:5)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

surface_0

2021/11/16 08:03

vueファイルのscript部の記述は正しいでしょうか? いきなりプロパティ名から始まる省略の仕方は知らないのですが、 自分が知らないだけなのかもしれませんので、参考にされたサイトなどあれば教えてください。
iwanao513

2021/11/16 08:19

質問する際にコード全部を書くと無駄に長くなってしまうので省略していました。 質問内容を正しく修正します。
surface_0

2021/11/17 02:42

なお、修正後のコードでも再現ができませんでした。 Sigtermcondiコンポーネントが読み込まれていない&何者かわからないので、 rowプロパティを持つSigtermcondiコンポーネントを適当に自作してみましたが、何事もなく動作してしまいました。 Sigtermcondiの中身が怪しいですので、こちらのコードも提示お願いします。 ちなみにエラーメッセージ内の`buffa` は提示されているコードには載っていないものですよね?
iwanao513

2021/11/17 07:54

ご確認ありがとうございます。 Sigtermcondの中身はかなりコードが長くて原因の箇所がわからないのである程度探れたら追記します。 buffaは消してました! すいません!
surface_0

2021/11/17 09:22

もし開示して問題ないコードであれば、そのまま公開Gitリポジトリとかに載せてしまうのもありです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問