This article covers Vue's v-bind, why it is used, and the basic way to write it.

What is v-bind?

v-bind is a directive in Vue.js used for data binding to attributes of elements or components. Normally, HTML element attributes hold static values, but with v-bind, you can bind Vue's data properties or computed results dynamically.

When people hear "data binding," it might sound complex, but it simply means specifying what used to be static in HTML dynamically using variables.

For example, you use v-bind when you want to use variables for the src of an <img/> or the href of an <a></a>.

Static

<template>
  <a href="https://laratech.jp/">Link</a>
</template>

Data Binding

<template>
  <a v-bind:href="url">Link</a>
</template>

<script setup>
  import { ref } from "vue"
  const url = ref("https://laratech.jp/")
</script>

The variable url is specified as the href in this example using v-bind.

Basic Syntax of v-bind

There are two ways to write v-bind.

First Method

<a v-bind:href="link">Link</a>

Second Method (Recommended)

<a :href="link">Link</a>

Here, the variable link is specified as the href.

I recommend the second method because it's simpler and shorter, and there’s no reason to use the first method.

Practical Use Cases

Passing Variables to Child Component Props

This is the most common use.

<template>
  <Children :title="title" />
</template>

<script setup>
  import { ref } from "vue"
  const title = ref("Title")
</script>

You can pass multiple props as well.

<template>
  <Children :title="title" :subtitle="subtitle" />
</template>

<script setup>
  import { ref } from "vue"
  const title = ref("Title")
  const subtitle = ref("Subtitle")
</script>

⇨How to Use Props in Vue

Using Variables for Image src

<template>
  <img :src="imgUrl" />
</template>

<script setup>
  import { ref } from "vue"
  const imgUrl = ref("Image URL")
</script>

Using Variables for Link href

<template>
  <a :href="url">Link</a>
</template>

<script setup>
  import { ref } from "vue"
  const url = ref("https://laratech.jp/")
</script>

Using Variables for Input Value

Sometimes this is used because writing without it can lead to a string type issue. However, in Vue, using v-model is more common for dynamic values.

<template>
  <form>
    <input :value="0" name="is_accept" />
    <input :value="1" name="is_accept" />
  </form>
</template>

Using Variables for Style

<template>
  <h1 :style="`color:${color}`">Title</h1>
</template>
<script setup>
  import { ref } from "vue"
  const color = ref("blue")
</script>

Reasons to Use v-bind

As shown in the examples above, v-bind makes it easy to create dynamic pages.

For instance, displaying the logo of a logged-in user on a user page.

<template>
  <img :src="imgUrl" alt="User Logo" />
</template>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"

  const imgUrl = ref("")

  const fetchLogoUrl = async () => {
    try {
      const { data } = await axios.get("/api/user/logo")
      imgUrl.value = data.logoUrl // Set the property based on the fetched data
    } catch (error) {
      console.error("Error fetching logo URL:", error)
    }
  }
  // Fetch data when mounted
  onMounted(() => {
    fetchLogoUrl()
  })
</script>

You use v-bind in situations where you want to create dynamic pages like this.

Conclusion

This was an article explaining v-bind in a way that beginners to Vue can easily understand.

I hope this helps someone out there.