Vue在数组上使用.length无法正常工作

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%