v-for（Vue.js）を使用してJSONオブジェクトをループし、レンダリングされたDOMを2つのdivコンテナーに分割するにはどうすればよいですか？

debugcn 投稿 Dev

ジョナス

170個のキーと値のペアを含むJSON形式の配列を返すAxiosコールバックがあります。ここで、v-forを使用して、key：valueペアごとに1つのdivコンテナーを別のdivラッパーにレンダリングします（結果は列として表示されます）。

私の推定出力は、DOM出力として2つの列があり、それぞれに85のキーと値のペアがあります。

JSON配列の最初の85（50％）を繰り返して、2つの列が隣り合って作成された後（html / css構造が正常であると仮定して）、v-forを2番目のdivラッパーにジャンプさせるにはどうすればよいですか？

よろしくお願いします！

Vue.config.devtools = true;

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '.eurQuotesWrapper',
  data() {
    return {
      rates: []
    }},
  created() {
    axios
      .get("http://data.fixer.io/api/latest?access_key=XXX&base=EUR")
      .then(response => {
        this.rates = response.data.rates;
      });
  }
});

.column {
  margin-top: 8px;
  margin-left: 6px;
  height: 100%;
  width: 16%;
  float: left;
  border: 1px solid;
  border-radius: 10px;
}

.headings {
  text-align: center;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #2E1A6D;
  margin-top: 5px;
  margin-bottom: 5px;
}

.keyColumn {
  float: left;
  width: 15%;
  height: 100%;
}

.valueColumn {
  float: left;
  width: 35%;
  height: 100%;
}

.key {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  font-size: 16px;
}

.value {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  font-size: 16px;
  padding-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>

<body>

<div class="column">
  <div class="headings">EUR/XXX</div>
  <div class="eurQuotesWrapper">
    <div class="keyColumn">
      <div v-for="(value, key) in rates" class="key">[[ key ]]</div>
    </div>
    <div class="valueColumn">
      <div v-for="(value, key) in rates" class="value">[[ value ]]</div>
    </div>
    <div class="keyColumn">
      <div v-for="(value, key) in rates" class="key"></div>
    </div>
    <div class="valueColumn">
      <div v-for="(value, key) in rates" class="value"></div>
    </div>
  </div>
</div>

</body>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>

muka.gergely

重要なのは、APIから取得したオブジェクトの前半（または後半）のみを返す計算値のセットを作成することです。計算された値を使用することにより、元の応答は将来の処理のために「無傷」のままになります。

これはDRYソリューションではありません（ただし、変更することができます）。列のコンポーネントを作成しますが、このスニペットでは、より単純な形式の表示を使用しました（<div v-for=""></div>）

Vue.config.devtools = true;

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '.eurQuotesWrapper',
  data() {
    return {
      rates: [],
    }
  },
  computed: {
    rates1() {
      const ratesArr = Object.entries(this.rates)
      const ret = ratesArr.reduce((a, c, i, d) => {
        if (i <= d.length / 2) a[c[0]] = c[1]
        return a
      }, {})
      console.log('rates1', ret)
      return ret
    },
    rates2() {
      const rateArr = Object.entries(this.rates)
      const ret = rateArr.reduce((a, c, i, d) => {
        if (i > d.length / 2) a[c[0]] = c[1]
        return a
      }, {})
      console.log('rates2', ret)
      return ret
    }
  },
  created() {
    axios
      .get("http://data.fixer.io/api/latest?access_key=XXX&base=EUR")
      .then(response => {
        this.rates = response.data.rates;
      });
  }
});

/*.column {
  margin-top: 8px;
  margin-left: 6px;
  height: 100%;
  width: 16%;
  float: left;
  border: 1px solid;
  border-radius: 10px;
}

.headings {
  text-align: center;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #2E1A6D;
  margin-top: 5px;
  margin-bottom: 5px;
}

.keyColumn {
  float: left;
  width: 15%;
  height: 100%;
}

.valueColumn {
  float: left;
  width: 35%;
  height: 100%;
}

.key {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  font-size: 16px;
}

.value {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  font-size: 16px;
  padding-left: 20px;
}*/

.keyColumn {
  float: left;
}

.valueColumn {
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>

<body>

  <div class="column">
    <div class="headings">EUR/XXX</div>
    <div class="eurQuotesWrapper">
      <strong>COL1</strong>
      <div v-for="(value, key) in rates1">[[key]]: [[value]]</div>
      <hr />
      <strong>COL2</strong>
      <div v-for="(value, key) in rates2">[[key]]: [[value]]</div>
    </div>
  </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</html>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

Related 関連記事

記事