Vue 3 - cannot bind any attribute

Question

can you help me with binding attributes with Vue 3?

I have app created which works well as it is, but when I put it into XML <content type="html>" VUE APP </content> the bindings doesn't work.

Issue is that as text it shows up, but in bindings it shows as object name.

ex.

{{someValueFromVueObject.url}}
{{someValueFromVueObject.height}}
<iframe :src="someValueFromVueObject.url" :height="someValueFromVueObject.height"></iframe>
<iframe v-bind:src="someValueFromVueObject.url" v-bind:height="someValueFromVueObject.height"></iframe>

that output code is like this (not binding values)

https:\\google.com\ 
800
<iframe src="someValueFromVueObject.url" height="someValueFromVueObject.height"></iframe>
<iframe src="someValueFromVueObject.url" height="someValueFromVueObject.height"></iframe>

Answer 1

I am not sure what issue you are facing but It's working fine. Here is the demo :

Vue.createApp({
  data: () => ({
    someValueFromVueObject: {
      url: 'https:\\google.com',
      height: 100
    }
  })
}).mount('#app')

<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  {{someValueFromVueObject.url}}
  {{someValueFromVueObject.height}}<br>
  <iframe :src="someValueFromVueObject.url" :height="someValueFromVueObject.height"></iframe>
</div>

Please check this code snippet and let me know what challenge you are facing.