How to achieve component feature in template node

Dashboard
1

Hi,

I want to use item-card to duplicate the self-designed item in template node of dashboard v2, but it does not work as I expected, here is my code, is there something wrong with it?

<template>
    <div id="app">
        <item-card v-for="(item, index) in items" :key="index" :index="index+1" :title="item.title" :speed="item.speed">
        </item-card>
    </div>
</template>

<script>
  const ItemCard = {
    props: ['index', 'title', 'speed'],
    template: `
      <div class="item-card" @click="toggle">
        <div class="left">{{ index }}</div>
        <div class="middle">
          <div class="title">{{ title }}</div>
          <div class="desc">Speed: {{ speed }} mm/s</div>
        </div>
      </div>
    `,
    methods: {
      toggle() {
        console.log('Click ' + this.index);
      }
    }
  };

  const app = Vue.createApp({
    data() {
      return {
        items: [
          { title: "Card A", speed: 100 },
          { title: "Card B", speed: 200 },
          { title: "Card C", speed: 300 }
        ]
      }
    }
  });

  app.component('item-card', ItemCard);

  app.mount("#app");
</script>

<style>
    .item-card {
        display: flex;
        border: 1px solid #ccc;
        border-radius: 8px;
        margin: 5px;
        padding: 10px;
        cursor: pointer;
    }

    .left {
        font-weight: bold;
        margin-right: 10px;
    }

    .middle {
        flex-grow: 1;
    }

    .title {
        font-size: 16px;
        font-weight: bold;
    }

    .desc {
        font-size: 14px;
        color: gray;
    }
</style>
2

Firstly, dashboard 2 creates the vue environment so calling Vue.createApp is neither recommended nor supported.

What's wrong with using the v-card components that are already built in. Have you read the extensive dashboard documentation which as it happens links off to the vuetify documentation where v-card is heavily documented with examples?

3

Hi, Steve

Where is the extension documentation you mentioned? I could not find related vue documentation in Node-RED website. And I actually did not know about the v-card feature for component.

1 Like
4

Extensive not extension. Documentation for node-red dashboard is linked in many places within the nodes and the flows site but here you go: https://dashboard.flowfuse.com/. In particular the template node docs: Template ui-template | Node-RED Dashboard 2.0