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)
vueファイルのscript部の記述は正しいでしょうか?
いきなりプロパティ名から始まる省略の仕方は知らないのですが、
自分が知らないだけなのかもしれませんので、参考にされたサイトなどあれば教えてください。
質問する際にコード全部を書くと無駄に長くなってしまうので省略していました。
質問内容を正しく修正します。
なお、修正後のコードでも再現ができませんでした。
Sigtermcondiコンポーネントが読み込まれていない&何者かわからないので、
rowプロパティを持つSigtermcondiコンポーネントを適当に自作してみましたが、何事もなく動作してしまいました。
Sigtermcondiの中身が怪しいですので、こちらのコードも提示お願いします。
ちなみにエラーメッセージ内の`buffa` は提示されているコードには載っていないものですよね?
ご確認ありがとうございます。
Sigtermcondの中身はかなりコードが長くて原因の箇所がわからないのである程度探れたら追記します。
buffaは消してました!
すいません!
もし開示して問題ないコードであれば、そのまま公開Gitリポジトリとかに載せてしまうのもありです。
あなたの回答
tips
プレビュー