gistfile1.txt

data(){
  return {
    columns: []
  }
},

 watch: {
    dbData: function(val) {
      console.log('val', val)
      this.pricematrix_name = val.pricematrix_name
      this.levels = val.pricematrix_column_level_count
      this.unitStart = val.matrix_row_unit_start
      this.unitStop = val.matrix_row_unit_stop
      this.unitInc = val.matrix_row_unit_increase
      this.unitName = val.matrix_row_uom_id
      this.levelChange = 0 // val.levelChange,
      this.basePrice = val.matrix_base_price
      this.basePriceIncrement = val.matrix_base_price_increment

      this.columns = val.columns
      this.columns.map((v) => (v.dropDownMenu = false))
    },
 },
 
 
 
 methods:{
  addCol: function() {
      this.columns = [
        ...this.columns,
        {
          pricematrixcolumn_level_id: this.columns.length,
          pricematrixcolumn_level_attribute: [this.addOnAttribute],
          pricematrixcolumn_level_attribute_id: this.addOnAttribute.value,
          pricematrixcolumn_level_attribute_text: this.addOnAttribute.text,
          pricematrixcolumn_price_increase_per_unit: this.addOnPriceIncrement,
          pricematrixcolumn_start_price: this.addOnStartingPrice,
          pricematrixcolumn_price_increase_type_id: '1',
          dropDownMenu: false,
        },
      ]
      console.log(this.columns)
      this.addOnMenu = false
    },
    
    editColumn(lev) {
      console.log(lev)
      lev.dropDownMenu = true
    },
    
    
    
    
    
    
    
    
    
    
    
    
    
     <Draggable
                              v-for="(level, idx) in columns"
                              :key="idx"
                              :tag="{ value: 'td' }"
                            >
                              <span>{{
                                level.dropDownMenu ? 'gio' : 'fff'
                              }}</span>
                              <span>{{
                                level.pricematrixcolumn_level_attribute[0].text
                              }}</span>
                              <VBtn
                                color="primary"
                                dark
                                @click="deleteCol(idx)"
                              >
                                <BaseIcon name="minus-circle" />
                              </VBtn>
                              <VBtn color="primary" dark @click="editColumn(level)">
                                <BaseIcon name="edit" />
                              </VBtn>

                              <div style="position:relative;">
                                <MultiplierDropDown
                                  v-model="level.dropDownMenu"
                                  :index="idx"
                                  :add-on-attribute-items="attributes"
                                  :add-on-attribute.sync="
                                    level.pricematrixcolumn_level_attribute[0]
                                  "
                                  :add-on-starting-price.sync="
                                    level.pricematrixcolumn_start_price
                                  "
                                  :add-on-price-increment.sync="
                                    level.pricematrixcolumn_price_increase_per_unit
                                  "
                                  @addColumn="level.dropDownMenu = false"
                                  @cancel="level.dropDownMenu = false"
                                />
                              </div>
                            </Draggable>
 
 }