Content editable vuejs

<template>
  <div>
    <p
      v-for="(value, index) in content"
      :id="`content-${index}`"
      :key="index"
      contenteditable
      @input="event => onInput(event, index)"
      @keyup.delete="onRemove(index)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: [
        { value: 'paragraph 1' },
        { value: 'paragraph 2' },
        { value: 'paragraph 3' },
      ],
    };
  },
  mounted() {
    this.updateAllContent();
  },
  methods: {
    onInput(event, index) {
      const value = event.target.innerText;
      this.content[index].value = value;
    },
    onRemove(index) {
      if (this.content.length > 1 && this.content[index].value.length === 0) {
        this.$delete(this.content, index);
        this.updateAllContent();
      }
    },
    updateAllContent() {
      this.content.forEach((c, index) => {
        const el = document.getElementById(`content-${index}`);
        el.innerText = c.value;
      });
    },
  },
};
</script>

Source: stackoverflow.com

Similar codes

0 vote287 views2 answers
Navbar route with params vue
Javascript Vue
1 vote291 views1 answer
Vue test form input
Javascript Vue
0 vote286 views1 answer
Vue router "savedposition" with ajax call
Javascript Vue
0 vote305 views1 answer
Vuejs get data fromo ajax
Javascript Vue
0 vote324 views1 answer
Cannot find module 'vue/types/umd'
Javascript Vue
0 vote305 views2 answers
Why i can't download node-sass while craeting new vue app
Javascript Vue
0 vote306 views1 answer
Add a Google Font to a VueJS
Javascript Vue
0 vote326 views1 answer
Error vuejs from chokidar enospc
Javascript Vue
1 vote307 views1 answer
Vue add script tags and link tags
Javascript Vue
0 vote297 views1 answer
How to include a toasted property in vue
Javascript Vue