Vue.jsのコンポーネントをCSSのorderで動的に並び替える方法

コンポーネントをorderで並び替え

Vue.jsのコンポーネントをCSSのorderで動的に並び替えたいことがあったのでサンプルコードを記述してみた。

まず、vue createでmy-orderを作成。

$ vue create my-order

App.vueにHTML, JavaScript, CSSを記載。

<template>
  <div>
    <p>select: {{ select }}</p>
    <p>
      appBlue: <input type="number" v-model="select.appBlue" value="1"><br>
      appGreen: <input type="number" v-model="select.appGreen" value="2"><br>
      appRed: <input type="number" v-model="select.appRed" value="3">
    </p>
    <div class="flex">
      <app-blue v-if="select.appBlue" :style="{order: select.appBlue}" />
      <app-green v-if="select.appGreen" :style="{order: select.appGreen}" />
      <app-red v-if="select.appRed" :style="{order: select.appRed}" />
    </div>
  </div>
</template>

コンポーネントをcomponentsフォルダに入れて読み込む。

import Blue from "./components/Blue.vue";
import Green from "./components/Green.vue";
import Red from "./components/Red.vue";

export default {
  data() {
    return {
      select: {
        appBlue: 1,
        appGreen: 2,
        appRed: 3
      }
    };
  },
  components: {
    appBlue: Blue,
    appGreen: Green,
    appRed: Red
  }
};

p {
  text-align: center;
}
input {
  width: 50px;
}
.flex {
  display: flex;
  flex-flow: column;
}

Blue.vueはこのように。(他2つは色違い)

<template>
  <div>appBlue</div>
</template>

<style scoped>
div {
  width: 50%;
  border: 1px solid blue;
  background-color: lightblue;
  padding: 10px;
  margin: 10px auto;
  text-align: center;
}
</style>

以上で完成。

コンポーネントをCSSのorderで動的に並び替え