在数组上使用 .length 的 Vue 在风格上不起作用

Question

我有以下代码：

<div
v-for="(item, index) in data.items"
:style="'display:inline-block !important; padding-left: 2% !important; padding-right: 2% !important; width: ' + data.items.length + '% !important'"
:key="index">

width: ' + data.items.length + '%部件未渲染。它不会显示在 html 中。当我用width: ' + 10 + '%替换它时，它正在工作。

.length 在 Vue 中不起作用吗？我以为是？

脚本标记：

<script>
export default {
props: {
jsonData: {
type: String,
default: "{}"
}
},
computed: {
data: function() {
return JSON.parse(this.jsonData);
}
}
};
</script>

Answer 1

<div >
<div v-for="(item, index) in data.items"
:style="{display:'inline-block !important', paddingLeft: '2% !important',
paddingRight:'2% !important',
width:'data.items.length +'%' !important'}">
</div>
</div>
---
data () {
return {
data:{
items: ["x","y","z"]
}
}

width comes 3%