在Vue 2.6(更新)中绑定一个嵌套的属性*对象的问题

Question

我使用一个简单的v-for来循环遍历对象数组。在v-for中，我有一个需要动态设置data-属性的锚标记。为了做到这一点，我尝试绑定一个属性对象，但当我这样做并重新加载npm时，我得到了这个错误:

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>

当我从上面的代码中注释出问题行时，浏览器控制台错误消失，但结果不是我想要的。为什么会出现这种情况?

编辑:添加学生数据示例

[
{
"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"
}
}
]

在vue docs中为2。当绑定一个属性为

的对象时

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

但是我的属性是嵌套在一个数组内的对象中。

Answer 1

效果很好....

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>