What is the best way to add an element conditionally within a specific Vue Component scope?

Question

What is the best way to add an element conditionally within a specific Vue Component scope?

I've been working on creating a Component for titles that are editable when double-clicked. The Component takes the specific h-tag and title as props, generating a regular h-tag that transforms into an input field upon double click. It's functioning properly with single instances on a page, but encounters issues when multiple Components are utilized due to improper scoping. I'm currently stuck on how to resolve this issue, here is the code snippet:

<template>
  <div class="edit-on-click">
    <input
      :class="sizeClass"
      type="text"
      v-if="edit"
      v-model="editedTitle"
      @blur="finishEdit"
      @keyup.enter="finishEdit"
      v-focus="true"
    />
    <span v-show="!edit" @dblclick.prevent="edit = true"></span>
  </div>
</template>

Struggling with scoping in the mounted hook:

  mounted() {
    let node = document.createElement(this.size); // Accepts h-tag (h1, h2 etc.)
    let titleText = document.createTextNode(this.finalTitle); // Accepts title

    node.appendChild(titleText);
    node.classList.add("editable-title");

    // This causes issues with multiple components on the page
    document.getElementsByTagName("span")[0].appendChild(node);
  },

Any suggestions on how to efficiently scope this? Thanks in advance!

javascript vue.js dom

Answer 1

Answer №1

When using Vue, it is recommended to avoid creating DOM elements in the traditional way as much as possible to prevent race conditions where Vue is not aware of these elements that you may want to be reactive at some point (such as the <span> double-clicking in your case).

Instead, consider dynamically switching between different headings using the <component> element and the v-bind:is property. Here is an example:

Vue.component('EditableHeading', {
  template: '#editable-heading',

  props: {
    size: {
      type: String,
      default: 'h1'
    },
    value: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      editing: false
    }
  },

  methods: {
    confirm(e) {
      this.$emit('input', e.target.value);
      this.close();
    },
    start() {
      this.editing = true;
      
      this.$nextTick(() => {
        this.$el.querySelector('input[type="text"]').select();
      });
    },
    close() {
      this.editing = false;
    }
  }
})

new Vue({
  el: '#app',

  data: () => ({
    titleList: [],
    text: 'New Title',
    size: 'h3'
  }),

  methods: {
    addNewTitle() {
      this.titleList.push({
        text: this.text,
        size: this.size
      });
    }
  }
})

.edit-on-click {
  user-select: none;
}

.heading-size {
  margin-top: 1rem;
  width: 24px;
}

p.info {
  background-color: beige;
  border: 1px solid orange;
  color: brown;
  padding: 4px 5px;
  margin-top: 2rem;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app">
  <editable-heading 
    v-for="(title, index) of titleList" :key="index" 
    v-model="title.text" 
    :size="title.size">
  </editable-heading>

  <div>
    <label>
      Heading size: 
      <input v-model="size" class="heading-size" />
    </label>
  </div>
  <div>
    <label>
      Title: 
      <input v-model="text" />
    </label>
  </div>
  <div>
    <button @click="addNewTitle()">Add new title</button>
  </div>

  <p class="info">
    [double-click]: Edit <br />
    [enter]: Confirm <br />
    [esc/mouseleave]: Cancel
  </p>
</div>

<script id="editable-heading" type="text/x-template">
  <div class="edit-on-click">
    <input 
      type="text" 
      v-if="editing" 
      :value="value" 
      @blur="close" 
      @keydown.enter="confirm" 
      @keydown.esc="close" />

    <component :is="size" v-else @dblclick="start">{{value}}</component>
  </div>
</script>

Answer 2

When using Vue, it is recommended to avoid creating DOM elements in the traditional way as much as possible to prevent race conditions where Vue is not aware of these elements that you may want to be reactive at some point (such as the <span> double-clicking in your case).

Instead, consider dynamically switching between different headings using the <component> element and the v-bind:is property. Here is an example:

Vue.component('EditableHeading', {
  template: '#editable-heading',

  props: {
    size: {
      type: String,
      default: 'h1'
    },
    value: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      editing: false
    }
  },

  methods: {
    confirm(e) {
      this.$emit('input', e.target.value);
      this.close();
    },
    start() {
      this.editing = true;
      
      this.$nextTick(() => {
        this.$el.querySelector('input[type="text"]').select();
      });
    },
    close() {
      this.editing = false;
    }
  }
})

new Vue({
  el: '#app',

  data: () => ({
    titleList: [],
    text: 'New Title',
    size: 'h3'
  }),

  methods: {
    addNewTitle() {
      this.titleList.push({
        text: this.text,
        size: this.size
      });
    }
  }
})

.edit-on-click {
  user-select: none;
}

.heading-size {
  margin-top: 1rem;
  width: 24px;
}

p.info {
  background-color: beige;
  border: 1px solid orange;
  color: brown;
  padding: 4px 5px;
  margin-top: 2rem;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app">
  <editable-heading 
    v-for="(title, index) of titleList" :key="index" 
    v-model="title.text" 
    :size="title.size">
  </editable-heading>

  <div>
    <label>
      Heading size: 
      <input v-model="size" class="heading-size" />
    </label>
  </div>
  <div>
    <label>
      Title: 
      <input v-model="text" />
    </label>
  </div>
  <div>
    <button @click="addNewTitle()">Add new title</button>
  </div>

  <p class="info">
    [double-click]: Edit <br />
    [enter]: Confirm <br />
    [esc/mouseleave]: Cancel
  </p>
</div>

<script id="editable-heading" type="text/x-template">
  <div class="edit-on-click">
    <input 
      type="text" 
      v-if="editing" 
      :value="value" 
      @blur="close" 
      @keydown.enter="confirm" 
      @keydown.esc="close" />

    <component :is="size" v-else @dblclick="start">{{value}}</component>
  </div>
</script>

What is the best way to add an element conditionally within a specific Vue Component scope?

Answer №1

Similar questions

How can I toggle the visibility of a div based on whether a variable is defined or not?

Using the `ssh2` module in Node.js without specifying a specific object

Create a dynamic form using JSON data and the Material UI library

Your search parameter is not formatted correctly

Having trouble extracting the video ID from a Youtube feed XML with jQuery

What are some solutions for resolving a TypeError in the created hook of a Vue.js application

The event on the full calendar is stuck in place and will not budge

The issue with the Hidden Content feature in the Slick Carousel is that it does not function correctly on the

Partial data is being received from the Ajax call

Implement a jQuery loading animation triggered by scrolling down the page

Display the initial page and activate the first navigation button when the page loads

JavaScript Linked List Operations: Issues with the removeHead() and contains() Functions

What could be the reason for encountering TypeScript within the Vue.js source code?

Restore checkbox to default setting

Issue with Javascript Promise causing failure to populate list with objects

Arrange the columns in Angular Material Table in various directions

I am working on developing a CRUD application using Vue.Js, but I'm facing difficulties in adding new users to

Retrieving data from a remote PHP server using JavaScript

Making a dropdown menu spin using Jquery and Javascript

Generate a series of rotations ranging from -60 to 60 using d3.cloud