jwmickey/spec.js

## spec.js
Vue.component('spec', {
    props: ['code', 'default'],
    inject: ['$getSettings'],
    computed: {
        // details of this are irrelavent to vue, we're just figuring out what to display
        getText() {
            const settings = this.$getSettings();
            if (!settings.hasOwnProperty(this.code)) {
                return this.default;
            }
            let text = settings[this.code].value;
            if (settings[this.code].hasOwnProperty('unit') && settings[this.code].unit.length > 0) {
                text += ' ' + settings[this.code].unit;
            }
            return text;
        }
    },
    template: '<span>{{ getText }}</span>'
});

const vm = new Vue({
    el: '#spec',
    data: {
        spec: {
            name: '',
            settings: {}
        }
    },
    provide: function() {
        return {
            $getSettings: () => this.getSettings
        }
    },
    computed: {
        getSettings() {
            return this.spec.settings;
        }
    }
});

const specFromSource = {
  name: 'Test',
  settings: {
     abc123: {
       value: 42,
       unit: 'mm'
     }
  }
}; // in reality, we get spec from window.postMessage
vm.spec = specFromSource;  // this triggers an update

// Usage:
// <body>
//    <spec code="abc123"></spec> <!-- this should display "42 mm"
// </body>
	Vue.component('spec', {
	props: ['code', 'default'],
	inject: ['$getSettings'],
	computed: {
	// details of this are irrelavent to vue, we're just figuring out what to display
	getText() {
	const settings = this.$getSettings();
	if (!settings.hasOwnProperty(this.code)) {
	return this.default;
	}
	let text = settings[this.code].value;
	if (settings[this.code].hasOwnProperty('unit') && settings[this.code].unit.length > 0) {
	text += ' ' + settings[this.code].unit;
	}
	return text;
	}
	},
	template: '<span>{{ getText }}</span>'
	});

	const vm = new Vue({
	el: '#spec',
	data: {
	spec: {
	name: '',
	settings: {}
	}
	},
	provide: function() {
	return {
	$getSettings: () => this.getSettings
	}
	},
	computed: {
	getSettings() {
	return this.spec.settings;
	}
	}
	});

	const specFromSource = {
	name: 'Test',
	settings: {
	abc123: {
	value: 42,
	unit: 'mm'
	}
	}
	}; // in reality, we get spec from window.postMessage
	vm.spec = specFromSource; // this triggers an update

	// Usage:
	// <body>
	// <spec code="abc123"></spec> <!-- this should display "42 mm"
	// </body>