英語が下手でごめんなさい。 私はvueのSelected小道具から来ました。小道具の値を介して状態選択アイテムを取得したい。
私はコンポーネントから来ました。
<template>
<h1>this.$store.state.fromSelected</h1>
</template>
<script>
export default {
props: ['fromSelected']
}
</script>
このようなvuex状態で
const state = {
'one': null,
}
ルートコンポーネントでfromコンポーネントを次のように使用します
<from from-selected="one"></from>
使用するときthis。$store.state.fromSelected 私は手に入れたいthis。$store.state.one コンポーネントから。
回答 3 件
Ifound。このように書かなければなりません。
// From.vue component <template> <span>{{this.fromSelected}}</span> </template> <script> export default { props: ['fromSelected'] } </script> // Root component import from from 'from'; <from :from-selected="this.$store.state.one"></from> // State export default { 'one': null, }
入れようとしましたかfromSelected 同じ構文で?
<from fromSelected="one"></from>
あなたが直面している問題は、VueとVuexのデータの流れに関係しているようです。ここで対処する必要がある2つの異なる問題があります。
問題番号1-データフローとスコープ:テンプレートコード:
問題番号2-静的および動的な小道具:<h1>this.$store.state.fromSelected</h1>
Vuex状態のコンポーネントプロパティにアクセスしようとしています。コンポーネントのローカルスコープにのみ存在するため、そこには存在しません。データの流れがどのように機能するかを以下に示します。行に
解決:<from from-selected="one"></from>
プロパティの先頭にコロンを付けないため、propは文字列リテラルと見なされ、変数を渡すことができる式ではありません。詳細はこちら:https://vuejs.org/v2/guide/components-props.html#Static-and-Dynamic-Props解決策は、Vuex状態の値を動的プロパティとしてコンポーネントに渡すことです。このような:
ここで試してください:https://jsfiddle.net/vngrcu5v/