チェックJSON配列は、店舗vuex

Question

で空である場合、私は、オブジェクトの私の配列は、いくつかのデータを持っているので、私の店（vuex）でbasilcyが、私はこのような配列を定義した場合、ボタンを表示したい：

state: { 
    document: [] 
}, 

I他のコンポーネントからこの配列にデータを追加します。データが正しく追加されていることを既に確認しました。問題はありません。

ので、私はいくつかのデータがあるだけの場合は、ボタンを表示したい：

<div class="row margin-above"> 
    <div class="panel panel-primary" v-for="section in this.$store.getters.getDocument"> 
     <div class="panel-body quote" > 
      <p>{{section.key}}</p> 
     </div> 
    </div> 
    <div v-if="this.$store.getters.getDocument != '[]'"> 
     <button class="btn btn-success btn-block">Create Document</button> 
    </div> 
</div> 

ボタンがあり、私は条件が一致した場合、ボタンで全体のdivを非表示にするが、それが動作していませんボタンはいつもそこにある、どんな助け？

Answer 1

長さプロパティを確認します。

<div v-if="this.$store.getters.getDocument.length != 0"> 
    <button class="btn btn-success btn-block">Create Document</button> 
</div> 

またはNO要素が存在しない場合nullにvuex変数を割り当てます。これ以上は機能するはずです。お店で

<div v-if="this.$store.getters.getDocument"> 
    <button class="btn btn-success btn-block">Create Document</button> 
</div> 

Answer 2

uは、直接テンプレートに店舗ゲッターを参照するコンポーネントで計算されたプロパティを追加もしそうなら、それはずっとよりクリーンで再利用可能な、ゲッター「のgetDocument」を定義しました：

computed : { 
    document: function() { 
     return this.$store.getters.getDocument; 
    } 
} 

テンプレートで

：。！

<div v-if="document.length"> 
    <button class="btn btn-success btn-block">Create Document</button> 
</div>