VueJS 2コンポーネントは、式を使用するときに矛盾を生じます。

Question

私は自分のコンポーネントの1つに情報を渡すのに苦労しています。

私は、データのリストを繰り返し処理し、リストの最後の項目についてブール値をtrueに設定しようとしています。私は面白い不一致に遭遇しています。v-bind:isLast="index + 1 == tiers.length"を次のコードで使用するとfalseに評価されますが、v-bind:test="{index: index, tiersLength: tiers.length, bool: index + 1 == tiers.length}"を実行してブール値を期待するのではなくその情報を格納するオブジェクトを使用すると、ブールキーはオブジェクト。

これはなぜですか？また、これは計算されたプロパティとしてより良いでしょうか？私は本当に層のリストからコンポーネントにもっと多くの情報を渡したいとは思っていません。私は、そのコンポーネントが層のリストに全く気づかないように感じるべきです。

<section id="classification-metadata-editor"> 
    <metadata-button-row 
    v-for="(row,index) in tiers" 
    v-bind:row="row" 
    v-bind:index="index" 
    v-bind:isLast="index + 1 == tiers.length" 
    v-bind:test="{index: index, tiersLength: tiers.length, bool: index + 1 == tiers.length}"> 
    </metadata-button-row> 
</section> 

isLast: false 
test: {index: 0, tiersLength: 1, bool: true} 

私は小道具を設定すると意図したかもしれないものよりも少しをしていますが、私はそれを行うにはどのように他はかなりわからないと感じて、これが意図されている場合はかなりよく分かりません。私は似たような質問をしてきましたが、検索のための適切な用語がわからないので、これが他のところでカバーされていれば謝ります。

ありがとうございました！

Answer 1

あなたはこのように支えるために、オブジェクトを割り当てることはできません。

v-bind:test="{index: index, tiersLength: tiers.length, bool: index + 1 == tiers.length}"> 

あなたは次のようにこのオブジェクトを取得するために計算されたプロパティやメソッドを作成する必要があります。

methods: { 
    getObject (index) { 
    return {index: index, tiersLength: this.tiers.length, bool: index + 1 == this.tiers.length} 
    } 
} 

とで、このメソッドを使用しますテンプレート：

v-bind:test="getObject(index)"