bugfix> vue.js > 投稿

英語が下手でごめんなさい。 私は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 件
  • あなたが直面している問題は、VueとVuexのデータの流れに関係しているようです。ここで対処する必要がある2つの異なる問題があります。

    問題番号1-データフローとスコープ:

    テンプレートコード: <h1>this.$store.state.fromSelected</h1>  Vuex状態のコンポーネントプロパティにアクセスしようとしています。コンポーネントのローカルスコープにのみ存在するため、そこには存在しません。データの流れがどのように機能するかを以下に示します。

    問題番号2-静的および動的な小道具:

    行に <from from-selected="one"></from>  プロパティの先頭にコロンを付けないため、propは文字列リテラルと見なされ、変数を渡すことができる式ではありません。詳細はこちら:https://vuejs.org/v2/guide/components-props.html#Static-and-Dynamic-Props

    解決:

    解決策は、Vuex状態の値を動的プロパティとしてコンポーネントに渡すことです。このような:

    // Javascript
    const store = new Vuex.Store({
      state: {
        one: "This comes from the Vuex state"
      },
    })
    new Vue({
      el: "#app",
      store: store,
      components: {
        from: {
          template: '<span>{{ fromSelected }}</span>',
          props: ['fromSelected']
        }
      }
    })
    // Template
    <div id="app">
      <from :from-selected="$store.state.one"></from>
    </div>
    
    

    ここで試してください:https://jsfiddle.net/vngrcu5v/

  • 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>
    
    

あなたの答え