title: VueJS: Computed Calculation Assistance
body: <p>I need to be able to convert a string (IP address) such as this <code>10.120.0.1</code> to a string (ISIS Network ID) such as this <code>49.0001.0101.2000.0001.00</code>. The middle section <code>010 1.20 00.0 001</code> 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 <code>53</code> for example would have a leading <code>0</code> to make 3 digits.</p>
  
  <p>All the IP addresses start with <code>10.120.</code> so I just need to inject the last 2 octets from the IP Address into the ISIS Network ID.</p>
  
  <p>I need this to be dynamic so when someone types in another ip address into a <code>loopbackIP</code> input, it automatically updates the <code>isisNetworkID</code> field.</p>
  
  <p>I have this:</p>
  
  <p><code>49.0001.0101.{{ isisNetworkID }}.00</code></p>
  
  <p>This needs to take the value from an input <code>v-model="loopbackIP"</code> that I have and translate the remaining values to sit in the middle of that <code>isisNetworkID</code> following this format - <code>xxxx.xxxx</code>.</p>
  
  <p>I've got this computed calculation but I'm not sure how to make 4 digits equal 3...</p>
  
  <pre><code>const loopbackIP = '10.120.0.1';
  
  const isisNetworkID = computed(() =&gt; {
      let idaho = '10.120.';
  
      if (loopbackIP.indexOf(idaho)) {
          return loopbackIP.slice(7);
      } else {
          console.log('Nothing is happening');
      }
  });
  </code></pre>
  
  <p>I hope this makes sense...</p>