CODEWITHSUNDEEP
javascriptvue.js
fencepencil
fencepencil

Reputation: 407

VueJS: Computed Calculation Assistance

I need to be able to convert a string (IP address) such as this 10.120.0.1 to a string (ISIS Network ID) such as this 49.0001.0101.2000.0001.00. The middle section 010 1.20 00.0 001 corresponds to the first string (I've spaced them out to show the IP address is inside it). You can see that there are 4 digits in each ISIS Network ID hextet that need to correspond to 3 digits in the IP Address octet. A number of 53 for example would have a leading 0 to make 3 digits.

All the IP addresses start with 10.120. so I just need to inject the last 2 octets from the IP Address into the ISIS Network ID.

I need this to be dynamic so when someone types in another ip address into a loopbackIP input, it automatically updates the isisNetworkID field.

I have this:

49.0001.0101.{{ isisNetworkID }}.00

This needs to take the value from an input v-model="loopbackIP" that I have and translate the remaining values to sit in the middle of that isisNetworkID following this format - xxxx.xxxx.

I've got this computed calculation but I'm not sure how to make 4 digits equal 3...

const loopbackIP = '10.120.0.1';

const isisNetworkID = computed(() => {
    let idaho = '10.120.';

    if (loopbackIP.indexOf(idaho)) {
        return loopbackIP.slice(7);
    } else {
        console.log('Nothing is happening');
    }
});

I hope this makes sense...

Upvotes: 1

Views: 75

Answers (1)

Terry
Terry

Reputation: 66113

I think I understand what you're trying to achieve. Let's break it down into digestible parts. You have an IP address of:

10.120.0.1

And you want to transform it such that each part is padded to 3 digits:

['010', '120', '000', '001']

This can be done by splitting the string by the . character, and the using String.prototype.padStart(). We then join the array back into a string:

'010120000001'
 ||||
 ^^^^ -> to be deleted

We know that the first 4 digits is not needed, since it's already part of your template, so we can remove them using String.prototype.substring(4). That leaves us with:

'20000001'

Now it is just the matter of splitting it into 4 characters per item:

['2000', '0001']

...and rejoining it with . character:

'2000.0001'

...and interpolating it back into the string. I have a proof-of-concept example below, which should output the desired string:

const loopbackIP = '10.120.0.1';
const parts = loopbackIP.split('.').map(x => x.padStart(3, '0'));

// Remove the first 4 characters
let isisNetworkId = parts.join('');
isisNetworkId = isisNetworkId.substring(4);

const output = `49.0001.0101.${isisNetworkId.match(/.{4}/g).join('.')}.00`;
console.log(output);

So if you want to translate it to your VueJS code, it should look no different that this:

const loopbackIP = '10.120.0.1';

const isisNetworkID = computed(() => {
    const loopbackIP = '10.120.0.1';
    const parts = loopbackIP.split('.').map(x => x.padStart(3, '0'));

    let isisNetworkId = parts.join('');
    isisNetworkId = isisNetworkId.substring(4);

    // Rejoin, split into items of 4-character long, rejoin by period
    return isisNetworkId.match(/.{4}/g).join('.');
});

Upvotes: 4

Related Questions