CODEWITHSUNDEEP
vue.js
CodeConnoisseur
CodeConnoisseur

Reputation: 1899

Trouble with binding an nested* object of attributes in Vue 2.6 (Updated)

I am using a simple v-for to loop through an array of objects. In that v-for I have an anchor tag that needs data- attributes set dynamically. To do this I attempt to bind an object of attributes but when I do and reload npm I get this error:

vue.common.dev.js?4650:4479 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'data-url' is not a valid attribute name.
    at baseSetAttr (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:6774:8)
    at setAttr (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:6749:5)
    at Array.updateAttrs (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:6704:7)
    at invokeCreateHooks (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:6060:22)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:5947:11)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:6044:9)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:5945:9)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:6044:9)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:5945:9)
    at createChildren (webpack-internal:///./node_modules/vue/dist/vue.common.dev.js:6044:9)

Vue

<template>
  <div>
    <div class="student-list">
      <div>
        <a v-for="student in students" :href="student.url" type="button" class="btn btn-sm is-dark"
           v-bind="student.attr"  //This line causes the issue
           >See Profile</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    students: Array,
  }
}

</script>

When I comment out the problem line from the code above then the browser console error goes away but the results are not what I want. Why is this occurring?

EDIT: Add student data example

[
   {
      "fullname":"Robert Chaff",
      "age":"26",
      "attr":{
         "data-url":"http://studentdata.test/student/1",
         "data-open-modal":"true"
      }
   },
   {
      "fullname":"Jason Bittermeyer",
      "age":"23",
      "attr":{
         "data-url":"http://studentdata.test/student/2",
         "data-open-modal":"true"
      }
   }
]

In the vue docs for 2.x it shows to do this when binding an object of attrs

<!-- binding an object of attributes -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

But my attrs are nested within an object which is within an array.

Upvotes: 1

Views: 193

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37883

Well, it's working just fine....

const vm = new Vue({
  data() {
    return {
      students: [
       {
          "fullname":"Robert Chaff",
          "age":"26",
          "attr":{
             "data-url":"http://studentdata.test/student/1",
             "data-open-modal":"true"
          }
       },
       {
          "fullname":"Jason Bittermeyer",
          "age":"23",
          "attr":{
             "data-url":"http://studentdata.test/student/2",
             "data-open-modal":"true"
          }
       }]
    }
  }  
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="student-list">
    <div>
      <a v-for="student in students" :href="student.fullname" type="button" class="btn btn-sm is-dark" v-bind="student.attr" >
        {{ student.fullname }}
      </a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions