Display the component's template when invoking methods

Question

Display the component's template when invoking methods

While immersing myself in learning Vue.js, I find myself in need of some guidance. Can someone kindly review my code and point me in the right direction? Below is the code snippet along with an explanation of what I am trying to achieve.

Below is the Vue.js app I am working on:

Vue.component('o365_apps_notifications', {
    template:
    `
    <div class="notification is-success is-light">
        // Call the name here and if added/removed.
    </div>
   `,

});

new Vue({
    name: 'o365-edit-modal',
    el: '#o365-modal-edit',
    components: 'o365_apps_notifications',
    data() {
        return {
            list: {},
            movable: true,
            editable: true,
            isDragging: false,
            delayedDragging: false,
            options: {
                group: 'o365apps',
                disabled: true,
                handle: '.o365_app_handle',
            }
        }
    },
    methods: {
        add(index, obj) {
            console.log(obj.name);
            this.$data.list.selected.push(...this.$data.list.available.splice(index, 1));
            this.changed();
        },
        remove(index, obj) {
            console.log(obj.name);
            this.$data.list.available.push(...this.$data.list.selected.splice(index, 1));
            this.changed();
        },
        checkMove(evt) {
            console.log(evt.draggedContext.element.name);
        },
    },
});

Here is the modal structure:

<div id="o365-modal-edit" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card px-4">
        <header class="modal-card-head">
            <p class="modal-card-title">Applications</p>
            <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="container">
                <div id="o365-modal-edit-wrapper">
                    <div class="columns">
                        <div class="column is-half-desktop is-full-mobile buttons">
                            // Empty
                        </div>
                        <div class="column is-half-desktop is-full-mobile buttons">
                            // Empty
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer class="modal-card-foot">
            <o365-apps-notifications></o365-apps-notifications>
        </footer>
    </div>
</div>

My Objective:

Within my modal, I have included the o365_apps_notifications HTML tag, where the add() and remove() methods log a name each time they are triggered using console.log(obj.name);. Additionally, the checkMove method displays the same name during the dragging process as illustrated below:

How can I ensure that my component renders and outputs the name within the modal footer? I have attempted various methods but haven't been successful in triggering the component.
Is there a specific approach to implement a fading effect on the component after a certain period?

Your assistance is highly appreciated!

javascript vue.js vuejs2

Answer 1

Answer №1

There are a couple of issues that need to be addressed:

The notification component has been declared with underscores (o365_apps_notifications), but the modal's template uses hyphens. It is important to maintain consistency in naming conventions (hyphens are preferred).
The notification component is declared globally using Vue.component, but it appears that you are trying to add it as a local component within the modal using components. Only one registration is necessary (the global registration should suffice).

`<o365-apps-notifications>`

The notification component should have public props for the item name and state:

Vue.component('o365-apps-notifications', {
  props: {
    item: String,
    isAdded: Boolean
  },
})

Subsequently, the template can use data binding to display these props.

Vue.component('o365-apps-notifications', {
  template:
   `<div>
      {{ item }} {{ isAdded ? 'added' : 'removed '}}
    </div>`
})

For the fade transition effect, conditional rendering based on a local Boolean data property like show should be implemented:

Vue.component('o365-apps-notifications', {
  template:
   `<div v-if="show">
      ...
    </div>`,
  data() {
    return {
      show: false
    }
  }
})

...and include the <transition> element along with CSS styles for the fade effect:

Vue.component('o365-apps-notifications', {
  template:
   `<transition name="fade">
      <div v-if="show">
        ...
      </div>
    </transition>`,
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

To enable automatic fading out of data, a watch on the item is necessary. This watch function sets show=true and then resets it to false after a delay:

Vue.component('o365-apps-notifications', {
  watch: {
    item(item) {
      if (!item) {
        return;
      }
      this.show = true;

      clearTimeout(this._timer);
      this._timer = setTimeout(() => this.show = false, 1000);
    }
  }
})

Usage

In the modal component, define local data properties to hold the currently added/removed item:

new Vue({
  el: '#o365-modal-edit',
  data() {
    return {
      changedItem: null,
      changedItemIsAdded: false,
    }
  },
})

Also update the add() and remove() methods to assign values to these properties:

new Vue({
  methods: {
    add(index, obj) {
      this.changedItem = obj.name;
      this.changedItemIsAdded = true;
    },
    remove(index, obj) {
      this.changedItem = obj.name;
      this.changedItemIsAdded = false;
    },
  },
})

Finally, bind these properties to the notification component's props within the modal component's template:

<o365-apps-notifications :item="changedItem" :is-added="changedItemIsAdded"></o365-apps-notifications>

See the demo for reference.

Answer 2

There are a couple of issues that need to be addressed:

The notification component has been declared with underscores (o365_apps_notifications), but the modal's template uses hyphens. It is important to maintain consistency in naming conventions (hyphens are preferred).
The notification component is declared globally using Vue.component, but it appears that you are trying to add it as a local component within the modal using components. Only one registration is necessary (the global registration should suffice).

`<o365-apps-notifications>`

The notification component should have public props for the item name and state:

Vue.component('o365-apps-notifications', {
  props: {
    item: String,
    isAdded: Boolean
  },
})

Subsequently, the template can use data binding to display these props.

Vue.component('o365-apps-notifications', {
  template:
   `<div>
      {{ item }} {{ isAdded ? 'added' : 'removed '}}
    </div>`
})

For the fade transition effect, conditional rendering based on a local Boolean data property like show should be implemented:

Vue.component('o365-apps-notifications', {
  template:
   `<div v-if="show">
      ...
    </div>`,
  data() {
    return {
      show: false
    }
  }
})

...and include the <transition> element along with CSS styles for the fade effect:

Vue.component('o365-apps-notifications', {
  template:
   `<transition name="fade">
      <div v-if="show">
        ...
      </div>
    </transition>`,
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

To enable automatic fading out of data, a watch on the item is necessary. This watch function sets show=true and then resets it to false after a delay:

Vue.component('o365-apps-notifications', {
  watch: {
    item(item) {
      if (!item) {
        return;
      }
      this.show = true;

      clearTimeout(this._timer);
      this._timer = setTimeout(() => this.show = false, 1000);
    }
  }
})

Usage

In the modal component, define local data properties to hold the currently added/removed item:

new Vue({
  el: '#o365-modal-edit',
  data() {
    return {
      changedItem: null,
      changedItemIsAdded: false,
    }
  },
})

Also update the add() and remove() methods to assign values to these properties:

new Vue({
  methods: {
    add(index, obj) {
      this.changedItem = obj.name;
      this.changedItemIsAdded = true;
    },
    remove(index, obj) {
      this.changedItem = obj.name;
      this.changedItemIsAdded = false;
    },
  },
})

Finally, bind these properties to the notification component's props within the modal component's template:

<o365-apps-notifications :item="changedItem" :is-added="changedItemIsAdded"></o365-apps-notifications>

See the demo for reference.

Display the component's template when invoking methods

Answer №1

`<o365-apps-notifications>`

Usage

Similar questions

Gather various data from multiple tables with Laravel

What steps should I take to customize the design of my Stripe subscription payment page?

Ways to retrieve a service variable within a delegated function (callback)

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

The error message "Uncaught (in promise) ReferenceError: dispatch is not defined" indicates that

Issues with response functionality in Node.js (Openshift) using express

Obtain the value of a JavaScript form with a dynamically generated field name

Is there a way to use JSON.stringify() to post multiple arrays at once?

Tips for keeping the Menu bar at the top of the page while scrolling from the middle

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

Encountering an error message stating "Type does not match FunctionComponent<Props>" and "Type is lacking the properties from type 'React Element<any, any>'"

What is the process for inputting a value within single quotation marks?

Unexpected behavior encountered when using the $http.post method

issue encountered when filling out a dropdown menu using a JSON data structure

Is it important to avoid two-way databinding in Angular 2 when it is not needed?

Is it possible to access variables within functions from outside of them?

When attempting to execute a function within another function in JavaScript, a ReferenceError is triggered

The "Find Usages" feature in Intellij does not have functionality across Lerna packages

Unable to render content after using array.push(....)

What is the best way to navigate through an HTML node tree, including all of its sub elements, when walking through