How to set readOnly when I insert new row in Vue?

Tags: #<Tag:0x00007f8b1d457428>
#1

My purpuse is that “Only specific cells which have data initially are readOnly. Others are not readOnly”

I would like to create a row with readOnly = false when I insert a new row.
I set my cells when I mount table data with updateSettings() like this.

const initialArray = [ {id: 1, name: "test1"},  {id: 2, name: "test2"} ,  {id: 3, name: "test3"}  ]

cells: function(row, col) {
  const cellProperties = {};
  if(col === 1 && initialArray.name[row]) {
    cellProperties.readOnly = true;
  }
return cellProperties
};

However, I couldn’t change my cellMeta when I set new cellMeta with beforeCreateRow.

beforeCreateRow: function(index, amount, source) {
        this.$refs.hot.hotInstance.setCellMetaObject(index, 1, {
        readOnly: false
      });
}

How do I solve my problem? When I create a new row below inital Data, it was readOnly = false, but when I create a new row between initial data, it musut be readOnly = true.

#2

Hey @sharekobekko

In most of the cases to change cell meta you also need to rerender the table - call the this.$refs.hot.hotInstance.render() in your case.

#3

Thank you for your reply.
Unfortunately, it didn’t work…

When I set readOnly = true, it would be work.

I think problem is here.
"if(col === 1 && initialArray.name[row])"

I tried to use getData()[row][col], but when I insert a new row, error appeared.

#4

Maybe you’ll be able to share a demo where the issue can be replicable? Here’s a demo that you can use as a base https://codepen.io/anon/pen/QVKBLZ?editors=1010

#5

I believe that the project is held or there’s no longer an issue as there’s no reply for a week so I’m closing this topic.

#6