dynamic receivers

for dingdong

by eglowc

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<section id='v-app'>
  <div>
    {{text}}
  </div>
  <div>
    <input type='text' v-model='header' @keyup.enter='addHeader'>
    <br>
    <ul class='header'>
      <li v-for='(h, index) in headers'>{{h.key}}
        <span v-if='h.key != "id"' @click='removeHeader(h, index)' class='rm-header'>(삭제)</span></li>
    </ul>
    <hr>
    <div>
      <span v-for='(h, index) in headers'>
        {{h.key}}:<input type="text" class='dd-header' v-model='h.value'>
        <!-- validate 추가하면 될 듯 -->
      </span>
      <input type="button" value="추가" @click='addReceiver'>
    </div>
    <br>
    <p>
      headers:
      <br> {{headers}}
    </p>
  </div>
  <div id='inline'>
    {{text}}
  </div>

<div>
    <table class="table table-hover" v-if='receivers.length > 0'>
      <thead>
        <tr>
          <th>#</th>
          <th v-for="(v, k, i) in receivers[0]">{{ k }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(data, key) in receivers">
          <td class="text-nowrap">{{ key + 1 }}</td>
          <td v-for="(v, k, i) in data" class="text-nowrap">
            <span v-for="x in v.split(',')" :class="{'kid': k=='id' || k=='cc' || k=='bcc'}">{{ x }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <hr>
  <p>
    recivers:
    <br> {{receivers}}
  </p>
</section>

CSS

textarea {
  width: 500px;
  height: 200px;
}

ul.header {
  padding: 0
}

ul.header li {
  display: inline;
  background: #ececec;
  border-color: #848484;
  color: #848080;
  font-weight: 400;
  border-radius: 4px;
  display: inline-block;
  padding: 0 6px;
  margin-right: 3px;
  text-align: center;
}

.rm-header {
  padding-left: 0 1px;
  margin-left: 5px;
  background: #fff;
  cursor: pointer;
}

JavaScript

var another = new Vue({
  el: '#inline',
  data: {
    text: 'inline'
  }
})

var app = new Vue({
  el: '#v-app',
  data: {
    text: '직접입력',
    receivers: [],
    header: '',
    headers: [{
      key: 'id',
      value: ''
    }],
    dynamic: ''
  },
  methods: {
    initHeader: function() {
      this.headers = [{
        key: 'id',
        value: ''
      }];
    },
    addHeader: function(e) {
      _value = (e.target.value);
      this.headers.push({
        key: _value,
        value: ''
      });
      this.header = '';
    },
    removeHeader: function(header, index) {
      this.headers.splice(index, 1);
    },
    addReceiver: function(header) {
      console.log(header)
      const obj = {};
      for (const h of this.headers) {
        _k = h.key;
        _v = h.value;
        h.value = '';
        Object.assign(obj, {
          [_k]: _v
        });
      }
      this.receivers.push(obj);
    }
  }
})