CycList.vue

<template>
<div>
  <c-row class="m-swf-message-content-item">
    <c-col :span="1">
      <i class="el-icon-circle-plus-outline" @click="handleAdd"></i>
    </c-col>
    <c-col :span="3">
      {{"---->"}}
    </c-col>
  </c-row>
  <div v-for="(item, index) in pattern.cycs" :key="index">
    <message-area :pattern="item" v-bind="$attrs">
      <template v-slot:icon>
        <i v-if="index !== 0" class="el-icon-circle-close" @click="handleDelete(index)"></i>
      </template>
    </message-area>
  </div>
  <c-row class="m-swf-message-content-item">
    <c-col :span="1">
      {{''}}
    </c-col>
    <c-col :span="3">
      {{"----|"}}
    </c-col>
  </c-row>
</div>
</template>
<script>

export default {
  name: 'cyc-list',
  props: {
    pattern: {
      type: Object,
      default: () => {}
    }
  },
  data: function () {
    return {}
  },
  methods: {
    handleAdd: function () {
      console.log(this.pattern.pattern)
      this.pattern.cycs.push(this.pattern.pattern)
    },
    handleDelete: function (index) {
      this.pattern.cycs.splice(index, 1)
    }
  }
}
</script>