Creating a dropdown menu that interacts with a specific element: step-by-step guide

Question

Creating a dropdown menu that interacts with a specific element: step-by-step guide

TL;TR

How can I achieve the following:

getMyComponent(selectedMyComponentID).complexOperation()

This seems like a simple and practical task, such as selecting an item from a dropdown menu.

More Information

Imagine that I am creating some sort of editor (like a todo list or similar application). The GUI includes the concept of a "selected" element. (In our case, it is the currently active bootstrap nav-tab), and I want to have dropdown menus with options that perform various operations on the selected element.

If I have the id of the "selected" component, obtaining a reference to the MyComponent with a complexOperation() method corresponding to that id proves to be more challenging than expected.

Maybe I'm not approaching this in "the Vue way".

I see several ways to achieve

complexOperationOnSelectedMyComponent()

:

Using refs - seems messy and unattractive
Refactoring the complexOperation() out of MyComponent and into a new MyData, so that the business logic on the data is utilized by both App.vue and MyComponent.vue. This approach involves changing data and therefore props in the parent component, which aligns with Vue principles. However, it leads to excess boilerplate since every operation in each component requires two versions. I personally dislike redundancy and boilerplate...
Utilizing vuex? Perhaps I'm not ready for that yet...
Implementing an "event bus" Vue instance and emitting events from parent to child components. Seems excessive. It's messy and results in additional boilerplate.

Am I overlooking something? Isn't this a common requirement?

Details

For demonstration purposes, let's consider a template:

<template>
  <div id="app">
    <div v-for="elem in mydata" :key="elem.id" @click="setSelected(elem)">
      <MyComponent :value="elem"/>
    </div>
    <button @click="complexOperationOnSelectedComponent">
        Complex operation on Selected Component
    </button>
  </div>
</template>

and a predefined data structure where the first element is initially selected:

data() {
  return {
    mydata: [
      { id: 0, foo: "bar", selected: true },
      { id: 1, foo: "baz", selected: false },
      { id: 2, foo: "world", selected: false }
    ]
  };
}

(View complete code on codesandbox)

There is a button labeled "Complex operation on Selected Component". What should be implemented in the

complexOperationOnSelectedComponent

method?

The codesandbox above also includes equivalent buttons within each MyComponent. These buttons simply trigger a complexOperation() method defined in the MyComponent.

In my opinion, whether the button is located inside or outside the component is trivial. The goal is to obtain a reference to the MyComponent for the selected id and invoke

selectedComponent.complexOperation()

within the menu item's @click event handler.

In our actual scenario, the user selects the "component" by clicking on a navigation bar (not directly on the MyComponent instance), resulting in an id (mydata[n].id as mentioned earlier).

Using refs

One option could be to assign ref="components" in the <MyComponents> definition. As it is within a v-for loop, this.$refs.components will represent an array of MyComponents. By identifying the correct one based on the id, it can be utilized.

Since there is no certainty about the order in this.$refs.components, a search for the selectedMyComponentID may be required each time, but it's manageable...

Is this truly the optimal solution?

vue.js vuejs2

Answer 1

Answer №1

When dealing with elements in the DOM that are not connected to any Vue instance properties, using $refs can be beneficial. This allows direct access to these elements and provides a way to store which element is selected in data.

The decision of whether to place the method in the parent or child component depends on the need for logic in other areas. If actions need to be performed within the child component, it makes sense to house the logic there.

An alternative approach could involve using an "event bus" Vue instance to emit events from child to parent. However, this may be considered overkill for simpler cases like this one.

In Vue.js, props flow from parent to child components, while events are emitted from child to parent components. While Vuex and event busses have their advantages in larger applications, they may not be necessary in scenarios like the current one. It's important to emit changes to props rather than directly manipulating them as shown in MyComponent.

A refactored version of the code emphasizes avoiding direct manipulation of prop values: https://codesandbox.io/s/button-onclick-on-selected-child-lf37c?fontsize=14

<template>
  <div id="app">
    <div v-for="elem in mydata" :key="elem.id" @click="selectedElem = mydata[elem.id]">
      <MyComponent :value="elem" :reverse="elem.reverse"/>
    </div>
    <button @click="reverseSelectedFoo">Reverse Selected Foo</button>
  </div>
</template>

<script>
import MyComponent from "./components/MyComponent";

export default {
  name: "App",
  data() {
    // Consider retrieving this data from an API
    return {
      mydata: [
        { id: 0, foo: "bar", reverse: false },
        { id: 1, foo: "baz", reverse: false },
        { id: 2, foo: "world", reverse: false }
      ],
      selectedElem: null
    };
  },
  methods: {
    reverseSelectedFoo() {
      this.selectedElem.reverse = !this.selectedElem.reverse;
    }
  },
  components: {
    MyComponent
  }
};
</script>

Answer 2

When dealing with elements in the DOM that are not connected to any Vue instance properties, using $refs can be beneficial. This allows direct access to these elements and provides a way to store which element is selected in data.

The decision of whether to place the method in the parent or child component depends on the need for logic in other areas. If actions need to be performed within the child component, it makes sense to house the logic there.

An alternative approach could involve using an "event bus" Vue instance to emit events from child to parent. However, this may be considered overkill for simpler cases like this one.

In Vue.js, props flow from parent to child components, while events are emitted from child to parent components. While Vuex and event busses have their advantages in larger applications, they may not be necessary in scenarios like the current one. It's important to emit changes to props rather than directly manipulating them as shown in MyComponent.

A refactored version of the code emphasizes avoiding direct manipulation of prop values: https://codesandbox.io/s/button-onclick-on-selected-child-lf37c?fontsize=14

<template>
  <div id="app">
    <div v-for="elem in mydata" :key="elem.id" @click="selectedElem = mydata[elem.id]">
      <MyComponent :value="elem" :reverse="elem.reverse"/>
    </div>
    <button @click="reverseSelectedFoo">Reverse Selected Foo</button>
  </div>
</template>

<script>
import MyComponent from "./components/MyComponent";

export default {
  name: "App",
  data() {
    // Consider retrieving this data from an API
    return {
      mydata: [
        { id: 0, foo: "bar", reverse: false },
        { id: 1, foo: "baz", reverse: false },
        { id: 2, foo: "world", reverse: false }
      ],
      selectedElem: null
    };
  },
  methods: {
    reverseSelectedFoo() {
      this.selectedElem.reverse = !this.selectedElem.reverse;
    }
  },
  components: {
    MyComponent
  }
};
</script>

Creating a dropdown menu that interacts with a specific element: step-by-step guide

TL;TR

More Information

Details

Using refs

Answer №1

Similar questions

How do I resolve validation function error messages in Vuetify?

Leveraging a single Vuex module store across various sibling components

Sorting Json Data Using Vue

What steps do I need to take in order to implement a functional pagination menu in Vue?

Dealing with CORS policy or 404 errors when using Vue.js and socket.io in conjunction with the npm run serve command

Error: Unable to access the 'width' property of an undefined value - Nuxt JS and Canvas

Using Font Awesome icons with Buefy for beautiful designs

How to utilize a PHP array within a Vue.js template

Error: Attempting to access the 'getCroppedCanvas' property of an undefined value in VueJs

Protecting Your Routes with Guards in Framework 7 Vue

Creating a map-like scrolling feature for a full-sized image, allowing both horizontal and vertical movement

You cannot convert a function to a string while utilizing axios get in nuxtServerInit

When using v-for to render an array list fetched from AsyncData, an error is thrown: The virtual DOM tree rendered on the client-side does not match the one

Upon reinstalling the node_modules in my Nuxt.js project, I encountered the error message "Must use import to load ES Module:~"

Encountering a `ECONNREFUSED` error while attempting to dispatch an action in the

Encountering difficulties while trying to access the SQLite database file through a JavaScript Axios GET request

The feature of Nuxt 3's tsconfig path seems to be malfunctioning when accessed from the

Guide on verifying the presence of a value in a textbox using vue

Using Vuetify to highlight selected radio buttons in an edit form

Exploring the process of introducing a new property to an existing type using d.ts in Typescript