From 6da3dfa14aadd37926ed9907edd58c359109ddbc Mon Sep 17 00:00:00 2001
From: Noel Tiangco <ntiangco@centrilogic.com>
Date: Fri, 19 Sep 2025 12:50:07 -0400
Subject: [PATCH] Add the anchor tag and url ref binding to href

---
 src/App.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 626e996..90470dc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,26 @@
 <script setup>
-import { ref } from 'vue'
-import socksGreenImage from './assets/images/socks_green.jpeg'
-
-const product = ref('Socks')
-const image = ref(socksGreenImage)
+import { ref } from "vue";
+import socksGreenImage from "./assets/images/socks_green.jpeg";
 
+const product = ref("Socks");
+const image = ref(socksGreenImage);
+const url = ref(
+  "https://www.vuemastery.com/courses/intro-to-vue-3/attribute-binding"
+);
 </script>
-  
+
 <template>
   <div class="nav-bar"></div>
   <div class="product-display">
     <div class="product-container">
-      <div class="product-image">    
-        <img v-bind:src="image">
+      <div class="product-image">
+        <img v-bind:src="image" />
       </div>
       <div class="product-info">
-        <h1>{{ product }}</h1>
+        <h1>
+          <a :href="url">{{ product }}</a>
+        </h1>
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>