# Issue binding some html attribute

**URL:** <https://forum.builder.io/t/issue-binding-some-html-attribute/7071>\
**Category:** Bugs\
**Created:** [January 2, 2025, 10:14pm UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071 "2025-01-02T22:14:22Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 2, 2025, 10:14pm UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/1 "2025-01-02T22:14:22Z")

</div>

Hi,  
I’m facing an issue when i try to bind html attributes for example here :

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/9233983a0c1d5df30d821577b9fc3f8c3ba8ab0b.png)  
When I publish it, I only see empty parameters in the html, no dynamic data

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [January 3, 2025, 7:45am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/2 "2025-01-03T07:45:36Z")

</div>

Hey @Guimic , could you please provide me with the Builder Content Entry link where you’re experiencing an issue as it this will me further my investigation?

Here is how to find it:

 ![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b1e06680dcbc6b15878a91b5dd4b8a0c3a0f625d.png)

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 3, 2025, 8:29am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/3 "2025-01-03T08:29:17Z")

</div>

Hi Sheema,  
Sure 🙂  
here is the content link : [Builder.io: Visual Development Platform](https://builder.io/content/9fca92d2215745a1a6861a43c7f6d0fd/edit?activeDesignerTab=3)

And you can preview it with the following preview link (to bind data) : [https://develop.d1gxapjes09rnx.amplifyapp.com/test/42b5b50b-a6a7-4260-9026-337415bf30ea](https://develop.d1gxapjes09rnx.amplifyapp.com/test/42b5b50b-a6a7-4260-9026-337415bf30ea)

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 3, 2025, 8:48am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/4 "2025-01-03T08:48:45Z")

</div>

Apparently, it seems to be the same issue than this old ticket (if it can help you to investigate): [Issue Binding HTML Attributes](https://forum.builder.io/t/issue-binding-html-attributes/1830)

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [January 3, 2025, 10:37am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/5 "2025-01-03T10:37:54Z")

</div>

Hey @Guimic could you please clarify your data binding on your page? I don’t see any content inputs or data connected to your page.

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 3, 2025, 10:49am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/6 "2025-01-03T10:49:21Z")

</div>

add the following url in the preview field to retreive data [https://develop.d1gxapjes09rnx.amplifyapp.com/test/42b5b50b-a6a7-4260-9026-337415bf30ea](https://develop.d1gxapjes09rnx.amplifyapp.com/test/42b5b50b-a6a7-4260-9026-337415bf30ea)

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 6, 2025, 10:17am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/7 "2025-01-06T10:17:23Z")

</div>

Did you manage to reproduce the bug?

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 14, 2025, 9:56am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/8 "2025-01-14T09:56:16Z")

</div>

Hi @sheema,  
Do you have an update to share 🙂 ?

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [January 15, 2025, 7:03am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/9 "2025-01-15T07:03:56Z")

</div>

Hey @Guimic, I have not been able to replicate this. This looks like an integration issue. Could you please share your integration code with me to investigate this further?

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 15, 2025, 8:50am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/10 "2025-01-15T08:50:53Z")

</div>

Hi Sheema,  
Here is a detailed example :

1. You can use this buidler element to replicate it : [Builder.io: Visual Development Platform](https://builder.io/content/364064c1441d498c83ef9b8dccb474e9/edit?activeDesignerTab=3&selectedBlock=builder-78ea1571a0bd49009e1317dd3d305651)  
or create a new empty page - (Content state is empty in this case)
2. Add a text element in the page
3. Change preview URL to retrieve data in the state (use [https://develop.d1gxapjes09rnx.amplifyapp.com/test/42b5b50b-a6a7-4260-9026-337415bf30ea](https://develop.d1gxapjes09rnx.amplifyapp.com/test/42b5b50b-a6a7-4260-9026-337415bf30ea) for example)
4. At this time content state changed  
Screenshot of the state at this step :  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a41d8cf425290fc6b39a4f00d8d8a7fddee640af.png)
5. Now bind text element on the state data. For example let’s bind the text content on the color name and repeat it for each color  
Repeat for each : state.GET\_VARIANT\_0.properties.colors  
Text content binding : state.colorsItem.value  
Screenshot :  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/29f410094ce0bf2ac2c1c468ee819495d1c3c78e.png)
6. At this step everything is ok ! I can publish it and see a live page with 4 colors name
7. Now I try to bind an html attribute. Let’s bind the name properties on the same as text content (state.colorsItem.value)  
Screenshots :  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5b89a7f7f2265389971a30226b3a8aa5be767656.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e073f4e8b55a84d86b07eac253665da61fff3bc1.png)
8. Now I inspect the live page and despite I see the new name attribute in the html, I don’t have the binded color value  
Screenshot  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/be42fd91e7eb471f818a86f5e1586f637ea47c0e.png)

Is it more undestandable now ?  
We can schedule a call to show you if you prefer

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [January 15, 2025, 11:00am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/11 "2025-01-15T11:00:33Z")

</div>

Hey @Guimic , I need the code for the integration that shows how you are integrating Builder with your App. I am clear with the steps you have provided.

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 15, 2025, 11:27am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/12 "2025-01-15T11:27:00Z")

</div>

Here it is

```auto
<script setup>
import API from "@/api/queries"
import { Content, fetchOneEntry, isPreviewing } from "@builder.io/sdk-vue"
import REGISTERED_COMPONENTS from "@/components/builderCustomComponents"

const { $appHashedApiKey, $eventBus } = useNuxtApp()
const route = useRoute()
const runtimeConfig = useRuntimeConfig()
const apiKey = runtimeConfig.public.PublicBuilderApiKey

const canShowContent = ref(false)
const model = "public-page"
const builderContent = ref(null)

const { data: content } = await useAsyncData("builderData", () =>
  fetchOneEntry({
    model,
    apiKey,
    userAttributes: {
      urlPath: route.path,
    },
  })
)

canShowContent.value = content.value ? true : isPreviewing(route.path)

const urlParams = route.path.split("/").filter(Boolean).pop()
let urlQueries = route.query

const apiInstances = []

async function init_data(content) {
  const pageData = content.data.pageData

  const queries = pageData.map((elm, idx) => {
    const api = new API(
      elm.data,
      elm.service,
      urlParams,
      urlQueries,
      $appHashedApiKey
    )

    const requestName = `${elm.service}_${idx}`
    apiInstances.push({
      name: requestName,
      api: api,
    })

    return {
      name: requestName,
      query: api.client ? api.fetchDataAmplify() : api.fetchDataSSR(),
    }
  })

  return executeQueries(queries)
}

async function executeQueries(queries) {
  const results = await Promise.all(queries.map((q) => q.query))

  const formattedResults = queries.reduce((acc, query, idx) => {
    acc[query.name] = results[idx]
    return acc
  }, {})

  return formattedResults
}

const toSend = ref(await init_data(content.value))

watch(
  () => route.query,
  // Restrict to catalog page only ?
  async (newQueries) => {
    const queries = apiInstances.map((elm) => {
      elm.api.data.url_queries = newQueries
      return {
        name: elm.name,
        query: elm.api.client
          ? elm.api.fetchDataAmplify()
          : elm.api.fetchDataClient(),
      }
    })

    toSend.value = await executeQueries(queries)
  }
)

$eventBus.on("onChangeLocalStorage", async () => {
  const queries = apiInstances.map((elm) => {
    elm.api.data[elm.api.localStorageName] =
      localStorage.getItem(elm.api.localStorageName) || JSON.stringify([])

    return {
      name: elm.name,
      query: elm.api.client
        ? elm.api.fetchDataAmplify()
        : elm.api.fetchDataClient(),
    }
  })

  toSend.value = await executeQueries(queries)
})

$eventBus.on("onAuthChanges", async (data) => {
  if ("status" in data) toSend.value.auth_status = data.status
  if (data.email) toSend.value.email = data.email
})

if (content.value.data.meta) {
  useSeoMeta({
    title: content.value.data.meta.title,
    ogTitle: content.value.data.meta.ogTitle,
    description: content.value.data.meta.description,
    ogDescription: content.value.data.meta.ogDescription,
    ogType: content.value.data.meta.ogType,
    ogImageUrl: content.value.data.meta.ogImageUrl,
    ogImageAlt: content.value.data.meta.ogImageAlt,
    twitterCard: content.value.data.meta.twitterCard,
    ogUrl: content.value.data.meta.ogUrl,
  })
}

onMounted(() => {
  const links = builderContent.value?.querySelectorAll("a")

  if (links) {
    links.forEach((link) => {
      const href = link.getAttribute("href")
      const isInternalLink = link.getAttribute("data-internal-link") !== "false"
      const isBlankTarget = link.getAttribute("target") === "_blank"

      if (isInternalLink && !isBlankTarget) {
        link.addEventListener("click", (event) => {
          if (event.metaKey || event.ctrlKey || event.button !== 0) return
          event.preventDefault()
          if (href) {
            navigateTo(href)
          }
        })
      }
    })
  }
})
</script>

<template>
  <div v-if="canShowContent" ref="builderContent">
    <Content
      :key="JSON.stringify(toSend)"
      :api-key="apiKey"
      :model="model"
      :content="content"
      :data="toSend"
      :custom-components="REGISTERED_COMPONENTS"
    />
  </div>
</template>

```

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [January 20, 2025, 9:38am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/13 "2025-01-20T09:38:07Z")

</div>

Hi @sheema  
I just figured out this is the same for img as well, and for all binded html attributes in reality

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 24, 2025, 12:52pm UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/14 "2025-01-24T12:52:48Z")

</div>

Hello @Guimic,

I wanted to update you that we’ve successfully reproduced the issue on our end related to the dynamic binding of HTML attributes. We’re currently discussing it internally to determine the next steps. Rest assured, I’ll keep you updated as soon as we make any progress.

Thanks,

---

<div class="post-metadata">

**Author:** ![Guimic](https://avatars.discourse-cdn.com/v4/letter/g/bb73d2/32.png) [@Guimic](https://forum.builder.io/u/Guimic)\
**Post date:** [February 12, 2025, 10:50am UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/15 "2025-02-12T10:50:20Z")

</div>

Hi @manish-sharma any news to share ?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 12, 2025, 3:55pm UTC](https://forum.builder.io/t/issue-binding-some-html-attribute/7071/16 "2025-02-12T15:55:24Z")

</div>

Hi @Guimic,

We’re still working on the fix and I’ll be sure to keep you updated as soon as there’s progress.

Thank you for your patience and understanding.

Best regards,