Setting up Firebase Hosting with your Google Domain.

 I managed to sort this issue with the help of this YouTube video, its the last 2 minutes https://www.youtube.com/watch?v=5-5q5GObvSI 

In your Firebase administration area, go to 'Hosting' .  

From here you'll need to 'Add custom domain', or if you've already done that bit then you can click on the view button, and then goto the 'Advanced' mode.  

What we're looking for is the 'value' for TXT type.  Once you have this, then copy it and log into 'Google Domains.'


In the DNS settings for Google Domains scroll down to 

Custom resource records , here I deleted what I had before .  
1. Leave the name as '@'
2. Selected 'TXT' from the Type dropdown. 
3. Pasted in my 'TXT' value into the 'Data' entry. 
4. Waited 24 hrs !

Vue.js Vuetify: V-checkbox - Value not changing from a Data

 So what i had is a V-checkbox like this

<v-checkbox
:label="Hub.name"
color="info"
:value=preselected
hide-details ></v-checkbox>
<script>

export default {
data() {
return {
preselected: true
};

But ‘preselected’ would not pass through as True.

I can change the ‘Value’ call to 'value=true'

And then to check that the Checkboxes will actual be forced to be ‘true’ directly.

I then managed to fix this by using ‘input-value’ instead. The following example works.

<v-checkbox :label="Hub.name"
color="info" :input-value=preselected hide-details ></v-checkbox>

 

And we can pick this value up in our Submit method like this

if(this.$refs.form.validate()){
this.$refs.checkbox.forEach((checkbox) => {
if (checkbox.inputValue != checkbox.isActive ){
console.log('checkbox.id)
if ( checkbox.isActive === true ){
// console.log('Add this hub from the array')
hub_ids.push(checkbox.id);
}
else {
hub_ids = hub_ids.filter(item => item !== checkbox.id);
// console.log('Remove this hub from the array')
}

 

 

Using 'Typeof' in Vue.js Testing to fix errors.

 

Using Chai in Vue.js - for some reason my test looked like this . 

it('Home page message', function(done) {

request('http://localhost:8080' , function(error, response, body) {

expect(body.$('div.app').text().to.have.string('Cornwall'));

done();

});

});

This was returning the error 

Uncaught TypeError: body.$ is not a function

To fix this wanted to see 'body' was, so added the code 

console.log(body)

The 'console.log' prints out in your terminal.  The print out looks like a string , and this can be confirmed with. 

console.log(typeof body)

From here on I can use 'search' on the string for the text I'm looking for . 

var expect = require('chai').expect;

var request = require('request');

it('Home page message', function(done) {

request('http://localhost:8080' , function(error, response, body) {

expect(body.search('Cornwall'));

done();

});

});

Additionally if you want to turn the 'body' into DOM objects then we can use 'jsdom'

I'll have a code example for this soon. 

Vue.js How to close a v-dialog box from inside the component.

This is easy enough to do when you have all your code on one page. You can set a value in ‘data’ of the script and then set that to either true or false to open and close the box. Take this example of my Message box, also note how you can manipulate the message and colors to your needs rather than rewriting. HTML

<v-snackbar v-model="snackbar" :timeout="4000" top :color="error_message_color">
<span>{{ error_message }}</span>
<v-btn outlined @click="snackbar = false">Close</v-btn>
</v-snackbar>

SCRIPT 

export default {
data() {
return {
...
snackbar: false,
error_message: "Awesome! You've updated this users roles.",
error_message_color: 'success'
};
},

// to fire this snackbar up from a method you just need to add ->
this.snackbar = true;

// if you want to fire up with a different message other than the defaults

if ( currentUser.email === Profile.email && action === 'remove' && role.toLowerCase() === 'admin'){
this.error_message_color = 'error';
this.error_message = 'Admins cannot remove their own admin role.';
this.snackbar = true;
return;
}

 However, although this code is good on one page if we’ve opened up the Dialog from a parent page like the following then unfortunately that won’t work.


// HTML
<RolesDialog :profile="profile" />

//SCRIPT
import RolesDialog from './RolesDialog.vue'

export default {
components: {
RolesDialog
},
data() {
return {
roles_dialog: false
};

With the above code, we cannot shut the box from our v-dialog box that we’ve opened.

The following code should work, and that works using $emit

Our call to the component.

<RolesDialog :profile="profile" @close-dialog="closeDialog" />

SCRIPT


data() {
return {
...
dialog: false,
roles_dialog: false
};
},

methods: {
closeDialog: function(){
console.log('close dialog 2');
this.dialog = false;
this.roles_dialog = false
}
},
}

In the CHILD component.


// HTML

<v-btn
color="blue darken-1"
text
@click="closeDialog"
>

// SCRIPT

methods: {
closeDialog: function(){
console.log('close dialog 1');
this.$emit('close-dialog')
}
}

  This should now work.