Vue

by kahiro okina

HTML

<div id="app">
  <test></test>
</div>

CSS

form {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
  justify-content: space-between;
  background: antiquewhite;
  padding: 10px;
}

button {
  background: cadetblue;
  color: #fff;
}

Vue

console.clear()

const Test = {
	name: 'Test',
  data() {
  	return {
      text: '',
    	selectedIndex: 0,
    }
  },
  computed: {
	  someList() {
      return [
      	{
          subject: '選択肢',
          body: '',
        },
        {
          subject: '大変たすけて！',
          body: '早く助けてあげないと！',
        },
        {
          subject: 'フロカン',
          body: '最高だよね！',
        },
      ]
    }
  },
  methods: {
  	changeTemplate(index) {
    	console.log(index)
    	this.selectedIndex = index
    	this.text = this.someList[this.selectedIndex].body
    },
  },
	template: `
  <form>
  	
    <select @change="changeTemplate($event.target.value)">
    	<template v-for="(item, i) in someList">
	    	<option :value="i" :key="i">{{item.subject}}</option>
      </template>
    </select>
    
  	<textarea :value="text"></textarea>
  	<button type="submit">問い合わせる</button>
  </form>
  `
};

Vue.component('Test', Test);

new Vue({
  el: "#app"
})