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

What is the best way to pass a file and a string to my C# backend using JQuery Ajax?

Undefined method error encountered within Vue.js nested ref structure

"Utilizing Google Tag Manager to trigger events and push them to the data layer

I am looking to view all products that belong to the category with the ID specified in the request, and have red-colored stocks

React UseEffect - Triggering only when data has been updated

Encountered an error: Unable to access property '0' of an undefined variable

Capture line breaks from textarea in a JavaScript variable with the use of PHP

Embrace the presence of null values on the client side

How can I pass the data-attribute ID from JavaScript to PHP on the same index page using ajax?

Utilizing Navigate and useState for Conditional Routing in React

Struggling with setting values in AngularJS?

When you drag down on mobile Safari on an iPad, touch events may cease to fire in HTML5

The process of loading and saving extensive data to the local storage of a user's Firefox browser involves extensive reading and writing operations

Identification of input change on any input or select field within the current modal using JavaScript

What is the process of installing an npm module from a local directory?

Showing the information obtained from an API request once the user submits the form without the need to reload the page

Introducing a fresh parameter to initiate and end Server Sent Events

JavaScript JCrop feature that allows users to resize images without cropping

"Using Jest to specifically test the functionality of returning strings within an object

What is the best way to achieve the functionality of this ajax jquery using vanilla JavaScript?