Whenever I submit a new message that will be rendered in the table the whole table reloads and creates a flicker effect. This started once I decided to use a table, when I was just creating dynamic div I did not have this issue.

submit method-

const submit = async () => {
  try {
    if (!(message.value.length >= 10)) {
      alert('The message has to be at least 10 characters')
    } else {
      const d: Date = new Date();
      await api.createBlog("test#1234#"   d.getMilliseconds(), message.value).then(
        posts
      )
    }
  } catch (error) {
    console.log('Error while submitting:', error)
  }
}

The button-

<button type="submit" @click="submit" >
  <span >message</span>
</button>

What I want is a new row created to populate it in the loop without the flicker / reload effect.

advice?

CodePudding user response：

If you don't specify the button type, the browser will automatically set it to 'reset' or 'submit' which causes the page to reload.

Which indicates type="submit" could be the culprit.

So, you can try replacing type="submit" with type="button".