6. Data binding Part 2 (Attributes)

In our previous article, I gave you something to think about. Remember? Attribute binding! Time to take a deep look into it. As we all know, examples help us understand the concept in an easier way. So, what are we waiting for?

Imagine we have an anchor tag and we would like to bind a link to the href attribute. Let’s try doing it using the text interpolation technique (template syntax) and check the result.

Disappointed? Here is what happened. The text, “Vue official website” got rendered as a hyperlink, as expected. Clicking on it opened a new tab because we used _blank as our target (nothing crazy here). Now, take a look at the URL in the address bar. Instead of navigating to https://vuejs.org/v2/guide/index.html as specified in the data object of the Vue instance, the value within the double quotes of the href attribute is treated as a string and parsed as the URL, “{{ vueLink }}”. That’s how the normal HTML href attribute works and that is what you see in the address bar of the newly opened tab. Clearly binding never happened.

So, this is how Vue works. We cannot use template syntax/double curly braces for HTML attribute binding. But, what if we still want to bind something dynamically to an attribute? Not to worry! Vue comes with another directive just for this purpose, v-bind. Directives are all around us if only we took the time to look for them.

Using v-bind directive, in this case, tells Vue.js to bind the value of the data property to the attribute name that follows the directive.

Syntax,

v-bind:html_attribute=”data_to_be_bound”

Example,

v-bind:href="vueLink"

Let us try executing this code and check the output.

Works like a charm! Clicking on the rendered link opens a new tab with the specified link as expected.

Few more sample scenarios,

Display an image dynamically on the webpage i.e., when the image location is changed in the Vue instance’s data object, the image should automatically be updated on the webpage.
Enable or disable an input field based on the value of the data bound to it.

Let us handle one situation at a time. By the end, you will be more expressive with Vue.js than you thought possible.

1. Displaying an image dynamically

Let us place Vue’s logo image in the same folder as that of our code and specify its location in the data object as logo. Bind the src attribute of the <img> tag to the value of the logo property.

<img v-bind:src="logo" width="70" height="50"/>

The image is rendered to the DOM as expected. Throw your hat in the ring and experiment if changing the image location updates the rendered image dynamically. Give me a shout in the comments section if you face any challenges in doing so. The output is as follows,

2. Enable or disable an input field based on the value bound to it

Time to do the same song and dance!

In Vue instance’s data object, let us have a property, “isInputDisabled” and set its value to true

isInputDisabled: true

Let us bind this to the disabled attribute of the input tag.

<input v-bind:disabled="isInputDisabled"/>

This will bind disabled attribute to the value of the mentioned property and disable the input field. Inspecting the element using Chrome Developer Tools shows its corresponding HTML code as shown below,

Now let us change the value of “isInputDisabled” to false.

isInputDisabled: false

It is interesting to note that the disabled attribute is not even included in the rendered <input> element (inspect the element using developer tools) if its value is false, null or undefined.

The complete code is as below,

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- text interpolations -->
      <h1>{{ message }}</h1>
      <p>
        <input v-bind:disabled="isInputDisabled"/>
      </p>
      <div>
        <img v-bind:src="logo" width="70" height="50"/>
        <br/>
        <a v-bind:href="vueLink" target="_blank">Vue official website</a>
      </div>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
  </body>
</html>

Index.js

var app = new Vue({
  el: "#app",
  data: {
    message: "Hi",
    isInputDisabled: false,
    logo: "vueLogo.png",
    vueLink: "https://vuejs.org/v2/guide/index.html"
  }
});

All the code discussed above is available in the GitHub repo

Fire up your favorite IDE and code a few scenarios of your own! If you have any questions, feel free to shoot them in the comments section. See you soon with another interesting concept!