Manipulating new item via its component instance


#1

Suppose I have a my-list and a my-list-item components with the obvious relationship: an instance of my-list contains a list of my-list-item instances. The data object of my-list contains a list items of data entries, each rendered as a my-list-item component instance.
There is a method addNewItem in my-list which appends a new data entry to items, causing a new instance of my-list-item to be created / rendered.

https://jsfiddle.net/e29hnu0c/1/embedded/result,js,html,css

The Question:
What is the recommended way to finetune (manipulate) the newly created item? How can one get a reference to the item’s component instance?
The solution presented in the above jsfiddle is to attach a callback (named onCreated) to the item’s data entry which gets called (and removed) in the created hook of my-list-item. Is this an acceptable practice? What is the recommended solution?


#2

Can you explain what you are trying to achieve? Like, what is the end result you are looking for here.


#3

What I am trying to achieve is manipulating the state/value of the newly added item. The last user-added item should be distinguished from the items that were initially present in the list and possibly also from the previously user-added items. Furthermore, I’d like to perform such a manipulation via the item’s component instance (vm). This allows for the use of instance methods and computed properties for the manipulation. The problem is that the instance is not available at the time when the item’s data is pushed onto the list.
I have solved this by attaching the onCreated callback:

addNewItem : function (by_way)  {
      var onCreated; // callback to manipulate the added item
                     // via its component instance (vm)
      switch (by_way) {
        case 'A':
          onCreated = function (vm) { vm.beActive(); }; break;
        case 'B':
          onCreated = function (vm) { vm.beBold(); }; break;
        case 'C':
          onCreated = function (vm) {
            vm.beBold();
            vm.beActive();
            vm.timeoutReset(1500);
          }; break;
      }
      // create new item data entry
      var item_entry = { 
        title : `Item #${this.items.length}`
      };
      //attach the onCreated callback to the item's data entry
      item_entry.onCreated = onCreated; 
      
      // add the data entry to the list
      this.items.push (item_entry);  
    },
  },

(See jsfiddle.net/vdsepazg/5.)

I’d like to know whether the requirement to perform the item’s state/value manipulation via the item’s instance (instead of purely via the item’s data) is a sign of some misconception on my side.


#4

Short answer - yes. You should change the data and let the component render that change.

Generally you should not need to access a component instance. You should be modeling your application state using data structures and then using components to render those data structures to the screen in a form that is human readable. Vue components are not designed to be used as data stores.

You could certainly wire up a vue instance to act as a data store and then use that vue instance to encapsulate some methods or something