0

このような計算されたプロパティに基づいてレンダリングするテーブルがあります。各行がその内容に基づいてスタイルを取得する方法に注目してください。これはうまくいきます。

computed: { rows: function () { return this.$store.getters.tableRows; }, ... }

<tr v-for="row in rows" v-bind:class="rowClass(row)">
  <td v-for="(item, key, index) in row.columns" v-bind:class="classy(index)">{{item}}</td>
</tr>

また、テーブルの外に集合情報を追加したかったので、次のメッセージ条件を設定しました。

computed: {
  finished: function () {
    return this.rows.length === 5;
  },
  whoopsie: function () {
    return this.rows[this.rows.length - 1].columns.elapsed < 0;
  }, ...
}

<div v-if="finished" class="alert alert-success">Done.</div>
<div v-if="whoopsie" class="alert alert-warning">Oops.</div>

最初のものは期待どおりに機能します。ただし、2番目のものは undefined のプロパティ「列」を読み取れないというエラーをスローします。これは、画面上のデータがはっきりと見え、長さプロパティがゼロではないため、非常識に見えます。

デバッガーコマンドを使用してそこを突き刺そうとしましたが、コードのその部分で呼び出されないようです。return falseをreturn trueに変更すると違いが生じるため、コードが実行されることはわかっています。また、デバッガーはコード内の他の場所でも動作するようです。変...

以下に示すように、値をグローバル変数に格納しようとしました。コンソール ウィンドウからその変数を突っ込むと、私が期待していた値が正確に生成されます。何が起こっているのか理解できませんが、間違いなく何らかの黒魔術です。

whoopsie: function () {
  window.wtf = this.rows[this.rows.length - 1];
  // return true;
  return false;
}, ...
  1. 計算されたプロパティの値を取得するにはどうすればよいですか?
  2. 正気な人が期待することをしないのはなぜですか？
  3. そこでデバッガをどのように呼び出すことができますか?

編集

ストアには次のゲッターがあります。

tableRows: function(state) { return state.dataTable.rows; }

次のオブジェクトに割り当てられています。データの各行には ID とコンテナ列があります。

const rows = [];
for (let i = 0; data && i < data.length; i++)
rows.push({
  id: data[i].id,
  columns: {
    ...
    elapsed: recalculate(data[i].span)
  }
});

テーブル内の行数が 5 (終了) で、最後の行の経過時間の値が負の場合 ( woopsie )に true になる 2 つの計算されたプロパティにバインドしたいと考えています。そのため、私はこれらの 2 つを宣言しています (そして最初のものだけが機能しています)。

4

1 に答える 1

0

(item, key, index)私にはこの特定のコードにエラーがあるようです。オブジェクトの配列を使用することはできません。その構文はobjectv-forでのみ使用できます。フィドルを参照してください。

次のようなものが必要です：

<tr v-for="row in rows" v-bind:class="rowClass(row)">
  <td v-for="(item, index) in row.columns" v-bind:class="classy(index)">{{item}}</td>
</tr>
于 2016-12-27T16:31:32.860 に答える