Solution 1 :

It’s not clear whether your list item components have special functionality or they’re just lots of <li>s. If it’s just data, then: rather than moving your list items out into separate Vue components, you may be able to achieve a better result with simple Javascript functions. For example:

import { apiSublist } from './sublists'
...
    list: [
        {
            title: "API",
            open: false,
            sublist: apiSublist()
        },
    ]
function apiSublist() {
    return ['Option 1', 'Option 2', 'Option 3']
}

You could, of course, move the entire “API” object into a function and modularize it even more.

If your list must use Vue components, then this is a perfect case for generic components.

// Generic component
<template>
    <ul v-show="list.open" class="list-item">
        // Assumes that every member of the sublist is a string component name
        <component :is="item" class="sub-items"
            v-for="(item,index) in list.sublist" :key="index" />
    </ul>
</template>

Problem :

I am using Vue to create a status page. I decided to make a main list with dropdown menus. My idea was that I would use placeholders, then when I was ready to fill in the dropdown, I would make separate Vue scripts and import.

export default {
  components: {
    ListItem
  },
  data: () => {
    return {
      list: [
        {
          title: "Message Processor",
          open: false,
          sublist: [
            MessageProcessor, "placeholder", "ph3"
          ]
        },
        {
          title: "API",
          open: false,
          sublist: [
            "ph1", "ph2", "ph3"
          ]
        }

I was then using this loop to populate the subsections.

<ul v-show="list.open" class="list-item">
    <li class="sub-items"
     v-for="(item,index) in list.sublist" :key="index">
    {{ item }}
    </li>
</ul>

However, when I plugged MessageProcessor.vue in the first placeholder slot as seen in the first block of code, I received the following error:

{ "staticRenderFns": [ null ], "_compiled": true, "beforeCreate": [
null ], "beforeDestroy": [ null ], "__file":
"src/components/Panels/MessageProcessor.vue" }

Comments

Comment posted by Stephen P

I’m not completely clear on what you’re trying to do so not “answering”, but in Vue if you just change the model — change the items that are actually in list.sublist — Vue will rerender it for you… but that’s what your

Comment posted by user120242

It’s wrong. {{ Component }} is just trying to return the Component builder object, not an actual instantiated instance. You need to use createElement(component), where createElement is the builder function passed as the first parameter of the render function. Take a look at slots. That is probably a better way to achieve whatever it is you are trying to do.

By

Leave a Reply

Your email address will not be published. Required fields are marked *