Uibuilder and Vuetify - Scripts not working

General
1

Hi all,

I've been working on using Vuetify alongside uibuilder as I'm building a dashboard for my work project.

I've stumbled across a (probably easily mendable) issue however - I'm currently trying to implement a Vuetify template including a date-picker/calendar and monthly news, but it doesn't seem to be working at all. The date-picker/calendar appears perfectly, but the news notes don't work.

This is currently how I have the index.html configured:

<!DOCTYPE html>
<html>
<head>
  <link href="../uibuilder/vendor/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <style>
  
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
      primary: #00bcd4,
      secondary: #8bc34a,
      accent: #009688,
      error: #e91e63,
      warning: #ff9800,
      info: #607d8b,
      success: #4caf50
      },
    },
  },
})
  </style>
  <script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>
</head>
<body>
    
    
    
    
  <div id="app">    

<!-- App.vue -->

<v-app>
    
  <v-app-bar app
  clipped-left
      collapse-on-scroll
      color="blue darken-2"
      dark
    >
      <v-app-bar-nav-icon  @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>Egg Lighting Emergency Lighting - Dashboard</v-toolbar-title>

      <v-spacer></v-spacer>
  </v-app-bar>
  
  
  
  <v-navigation-drawer app
      v-model="drawer"
      temporary
      id = "drawer"
    >
    </v-navigation-drawer>



  <!-- Sizes your content based upon application components -->
  <v-content>

    <!-- Provides the application the proper gutter -->
    <v-container fluid>
    <v-row>
    <v-col cols="12" sm="6" class="my-2 px-1">
      <v-date-picker
        ref="picker"
        v-model="date"
        :picker-date.sync="pickerDate"
        full-width
      ></v-date-picker>
    </v-col>
    <v-col cols="12" sm="6" class="my-2 px-1">
      <div class="title">Month news ({{ pickerDate || 'change month...' }})</div>
      <div class="subheading">Change month to see other news</div>
      <ul class="ma-4">
        <li v-for="note in notes" :key="note">{{ note }}</li>
      </ul>
    </v-col>
  </v-row>
  
      <!-- If using vue-router -->
      <router-view></router-view>
    </v-container>
  </v-content>

  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

</div>



  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
  <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
  <script src="../uibuilder/vendor/vue/dist/vue.js"></script>
  <script src="../uibuilder/vendor/vuetify/dist/vuetify.js"></script>
  <script src="./uibuilderfe.min.js"></script>
  <script src="./index.js"></script>
  <script>
  export default {
    data () {
      return {
        drawer: null,
        items: [
          { title: 'Home', icon: 'dashboard' },
          { title: 'About', icon: 'question_answer' },
        ],
      }
    },
  }
</script>
<script>
  export default {
    data: () => ({
      date: new Date().toISOString().substr(0, 10),
      pickerDate: null,
      notes: [],
      allNotes: [
        'President met with prime minister',
        'New power plant opened',
        'Rocket launch announced',
        'Global warming discussion cancelled',
        'Company changed its location',
      ],
    }),
    watch: {
      pickerDate (val) {
        this.notes = [
          this.allNotes[Math.floor(Math.random() * 5)],
          this.allNotes[Math.floor(Math.random() * 5)],
          this.allNotes[Math.floor(Math.random() * 5)],
        ].filter((value, index, self) => self.indexOf(value) === index)
      },
    },
  }
</script>
</body>
</html>

I think perhaps this might be the piece of code giving me grief:

<script>
  export default {
    data: () => ({
      date: new Date().toISOString().substr(0, 10),
      pickerDate: null,
      notes: [],
      allNotes: [
        'President met with prime minister',
        'New power plant opened',
        'Rocket launch announced',
        'Global warming discussion cancelled',
        'Company changed its location',
      ],
    }),
    watch: {
      pickerDate (val) {
        this.notes = [
          this.allNotes[Math.floor(Math.random() * 5)],
          this.allNotes[Math.floor(Math.random() * 5)],
          this.allNotes[Math.floor(Math.random() * 5)],
        ].filter((value, index, self) => self.indexOf(value) === index)
      },
    },
  }
</script>

Perhaps I've placed this in the wrong part of the code, or perhaps I haven't installed/configured vuetify properly? Any help would be appreciated.

Thanks! C:

2

Does this belong on the node-red forum ? Perhaps you should try the vue(tify) forums instead ?
Note that it is essential to use the web inspector to see what is going on, any error you can google.

3

The problem seems to be using it within uibuilder w/ node-red rather than vuetify itself - it works fine otherwise (regular vuejs vuetify setup)

4

Is this correct? Especially, is the location on the page/file correct, and should it be in a <style> tag?

5

Shouldn't that have a return in there? You need to return the data values for components.

That doesn't look right to me, should it be something like pickerDate: (val) => { or pickerDate: function(val) {?