In the previous post I covered how to get Electron and Vue set up, leaving the work of development fairly open ended. Now that you (and I) have had some time to consume the Vue documentation, let’s see how much we’ve actually retained.

Vue Basics

Vue provides a system that splits the view from the data. You utilize this mechanism as far as you need, with a complete split, or continue to intersperse your HTML with code.

Each .vue file contains both the HTML and code, which allows for some thought-locality – all the code that directly deals with the HTML is nearby. You can even use this mechanism internally in a source file, by breaking down your model with “local components”.

Each “Vue instance” is created with pre-defined properties, as provided by the data object provided to it. These properties (at instance creation time) are what it will track. If any new properties are added later, they are not “reacted” upon. Something to remember.

Populating Vue Components

In a component, you may want to display some data. This data can be populated in various ways:

• the data directly – {{ dataVariable }}
• computed (and cached) – {{ computeFunction }}
• method (not cached) – {{ methodFunction }}

As expected, the three ways are from the corresponding part in the code:

...
  data: () => ({
    dataVariable: null,
  }),
  computed: {
    computeFunction: function () {
      ...
    },
  },
  methods: {
    methodFunction: function () {
      ...
    },
  },

Passing Data to Components

When creating a “dynamic component” (my words), you may want to pass some reactive data to it. While this seems like it should be trivial (as of Vue 2.6.11), it was not.

In the component, we will use both props, computed, and watch.

For example, if you want to control “showing” and “hiding” the component…

  <v-dialog v-model="show">
...


...
  props: {
    value: Boolean,
  },
  computed: {
    show: {
      get () {
        return this.value;
      },
      set (value) {
        this.$emit('input', value);
      }
    },
  },
  watch: {
    show (value) {
      if (value) {
        // ... 'this.value' will be true, do work.
      }
    }
  },

And in the parent of the component…

  <MyComponent v-model="showIt"></MyComponent>

So in the parent, if the showIt variable is toggled, the component will react to the change and run some code, as well as trigger behaviors dependent on the show variable.