<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<h1>Vue.js</h1>
  <div id="scroll">
    <div id="contents">
      <device-template
                       name="XX01"
                       made="japan"
                       price=21,000>
      </device-template>
      <device-template
                       name="XX02"
                       made="china"
                       price=18,000>
      </device-template>
      <device-template
                       name="XX03"
                       made="china"
                       price=19,000>
      </device-template>
      <device-template
                       name="XX04"
                       made="china"
                       price=14,000>
      </device-template>
      <device-template
                       name="XX05"
                       made="canada"
                       price=23,000>
      </device-template>
      <device-template
                       name="XX06"
                       made="japan"
                       price=11,000>
      </device-template>
      <device-template
                       name="XX07"
                       made="canada"
                       price=10,000>
      </device-template>
      <device-template
                       name="XX08"
                       made="china"
                       price=27,000>
      </device-template>
      <device-template
                       name="XX08"
                       made="china"
                       price=12,000>
      </device-template>
      <device-template
                       name="XX09"
                       made="china"
                       price=31,000>
      </device-template>
    </div>
  </div>
<div id="contents">

</div>
h1 {
  text-align: center;
}

#scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#contents {
	display: inlie-table;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.device {
	display: table-cell;
	height: 300px;
}

.img-box {
	margin-left: 24px;
	margin-right: 24px;
	margin-top: 10px;
	height: 200px;
	width: 150px;
	border: solid 1px;
	background-color: gray;
}

.info-box {
	text-align: center;
}
View Compiled
const Devices = {
    template:
    '<li class="device" v-on:click="popups">' +
      '<div class="img-box">' +
      '</div>' +
      '<div class="info-box">' +
          '<p>device : {{ name }}</p>' +
          '<p>made : {{ made }}</p>' +
          '<p>price : {{ price }}</p>' +
      '</div>' +
    '</li>',
    props: {
      name: String,
      made: String,
      price: Number
    },
    data: function() {
      return {
        name,
        made,
        price
      }
    },
    methods: {
      popups: function() {
        alert("商品名: " + this.name +
              "\n製造: " + this.made +
              "\n値段: " + this.price)
      }
    }
}

new Vue({
  el: '#contents',
  components: {
    'device-template': Devices
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.