How do I do this to work with template node

Dashboard
1

Here is the code from

https://vuetifyjs.com/en/components/buttons/#dialog-action

<template>
  <v-sheet
    class="position-relative"
    min-height="450"
  >
    <div class="position-absolute d-flex align-center justify-center w-100 h-100">
      <v-btn
        color="deep-purple-darken-2"
        size="x-large"
        @click="dialog = !dialog"
      >
        Open Dialog
      </v-btn>
    </div>

    <v-fade-transition hide-on-leave>
      <v-card
        v-if="dialog"
        append-icon="$close"
        class="mx-auto"
        elevation="16"
        max-width="500"
        title="Send a receipt"
      >
        <template v-slot:append>
          <v-btn icon="$close" variant="text" @click="dialog = false"></v-btn>
        </template>

        <v-divider></v-divider>

        <div class="py-12 text-center">
          <v-icon
            class="mb-6"
            color="success"
            icon="mdi-check-circle-outline"
            size="128"
          ></v-icon>

          <div class="text-h4 font-weight-bold">This receipt was sent</div>
        </div>

        <v-divider></v-divider>

        <div class="pa-4 text-end">
          <v-btn
            class="text-none"
            color="medium-emphasis"
            min-width="92"
            variant="outlined"
            rounded
            @click="dialog = false"
          >
            Close
          </v-btn>
        </div>
      </v-card>
    </v-fade-transition>
  </v-sheet>
</template>
<script setup>
  import { ref } from 'vue'

  const dialog = ref(true)
</script>
2

Dont do this. That is Vue 3 composition API. Instead use the Options API

When you drop ui-template onto the Node-RED editor, it comes pre-set with working VUE code - adapt that to your code.

Also, refer to the documentation: Template ui-template | Node-RED Dashboard 2.0

1 Like
3

Something like that

<script>
export default {
  data() {
    return {
      dialog: false
    }
  },
  methods: {
    toggleDialog() {
      this.dialog = !this.dialog;
    },
    closeDialog() {
      this.dialog = false;
    }
  }
}
</script>
4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.