How to make a pulldown menu that acts on a selected element? - vue.js

Question

TL;TR
How do I:
getMyComponent(selectedMyComponentID).complexOperation()
To me this sounds like such a trivial and useful thing, e.g. from a pulldown menu.
A little more detail
Assume I'm making an editor of some kind (think todo-list or something). The GUI has the concept of a "selected" element. (In our real case it is the currently visible bootstrap nav-tab), and I want to have pull-down menus with menu-items that perform different operations on the selected element.
Assuming I have the id of the "selected" component, getting a reference to the MyComponent that has a complexOperation() method corresponding to the id is surprisingly difficult.
Perhaps that is because I'm not doing this "the Vue way".
I see these ways to accomplish complexOperationOnSelectedMyComponent():
use refs - seems messy and ugly
refactor the complexOperation() out of MyComponent and into a new MyData, so the business logic on the data is used by oth App.vue and MyComponent.vue. Now the parent is changing data and therefore props - sounds vue-ish. But that leads to lots of boilerplate since every operation in every component now has two versions. I'm not a fan of boilerplate and duplication...
use vuex? I think I'm not there yet...
Use an "event bus" Vue instance and $emit events from parent to child. Seems overkill. And is messy and has boilerplate.
Am I missing something? Isn't this pretty standard stuff?
Details
For simplicity, we'll say that there is 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 data structure where the first one is initially selected:
data() {
return {
mydata: [
{ id: 0, foo: "bar", selected: true },
{ id: 1, foo: "baz", selected: false },
{ id: 2, foo: "world", selected: false }
]
};
}
(Complete codesandbox)
So there is a "Complex operation on Selected Component" button. But what should I put in the complexOperationOnSelectedComponent method?
The codesandbox above also has equivalent buttons inside each MyComponent. They simply call a complexOperation() method in the MyComponent definition.
I'm thinking that whether the button happens to be inside or outside the component is a minor detail. Get a reference to the MyComponent for the selected id and call selectedComponent.complexOperation() in the menu item's #click handler.
In our real scenario, the user selects the "component" by clicking on a nav-bar, (not on the MyComponent instance), so what we have is a id (mydata[n].id or 0, 1 or 2 above).
Using ref-s
What I could do was put ref="components" in the <MyComponents> definition. Because it is in a v-for loop, this.$refs.components will then be an array of MyComponents. Find the one with the right id and use it.
Because there is no guarantee about the order of in this.$refs.components I'd have to search the array for the selectedMyComponentID every time, but hey...
Is this really the best solution?

Answer 1

You typically want to use $refs if you need access to the DOM directly to get to elements that are not connected/controlled to any Vue instance properties.
You can store which element is selected in data and target that specific element.
Putting your method in the parent or the child? It depends, do you need the logic in other places? In this case, I think it makes sense in the child because you want to be able to perform actions there as well.
Use an "event bus" Vue instance and $emit events from parent to child. Seems overkill.
Props go from parent to child. Events are emitted from child to parent.
Vuex and event busses are really helpful in larger applications but really not needed in this case. You should, however, emit changes that you want to make to your props and not edit them directly like you are doing now in MyComponent.
I refactored your code a bit, I do want to repeat that modifying the values of props directly is bad practice: 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() {
// Ideally this data is read from an API somewhere
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>