ブログ

読んで思い出す。忘れるために書く

トップ > Vue.js > クリックでトグルする要素を作る

クリックでトグルする要素を作る

Vue.js

ゴール

「テーブルの <td/> 要素をクリックすると背景の色が変わる」コンポーネント (ToggleTd.vue) を実装する

実際の表示には Index.vue を用いる

f:id:innocent-zero:20180409010138g:plain

初期データ

データ内容や定義はテキトー

実際は コンポーネントが作られる適当なタイミングで外部と通信し初期データを取得する

実装

<template/>

Index.vue

<template>
  <div>
    <table ref="table">
      <tr>
        <th>Eng</th>
        <th>Jp</th>
      </tr>
      <tr>
        <toggle-td
          v-for="data in tableData"
          :key="data.time"
          :data-time="data.time">{{ data.msg }}</toggle-td>
      </tr>
    </table>
  </div>
</template>

ToggleTd.vue

<template>
  <td @click="toggleActive"
    :class="{ active: isActive }"
    >
    <slot></slot>
  </td>
</template>

<script/>

Index.vue

<script>
import ToggleTd from '@/components/ToggleTd'

export default {
  name: 'ToggleTd',
  data () {
    return {
      tableData: [
        {'time': 10, 'msg': 'Hello'},
        {'time': 12, 'msg': 'こんにちは'}
      ]
    }
  },
  components: {
    'toggle-td': ToggleTd
  }
}
</script>

ToggleTd.vue

<script>
export default {
  name: 'ToggleTd',
  data () {
    return {
      isActive: false,
      store: []
    }
  },
  methods: {
    toggleActive: function () {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style/>

Index.vue

<style scoped>
/* none */
</style>

ToggleTd.vue

<style scoped>
.active {
  background: orange;
}
</style>

Links