Question

我想在v-for中使用索引值来确定元素的transform属性，特别是translateX。但是，我得到了错误

'v-bind'指令需要属性值

在实现此目标方面的任何帮助将不胜感激。

<template>
  <div class="row">
    <div 
        v-for="(n, index) in depth"
        :key="index"
        :style="{ transform: 'translateX(' + determineIndentTransform(index)) + 'px)'}"
     >
    </div>
  </div>
</template>

<script>
export default {
    name: 'ProductTableRow',
    props: {
        depth: Number,
    },
    methods: {
        determineIndentTransform: function(index) {
            return (this.depth * 2) * index
        },
    }
}
</script>

Answer 1

该方法的this范围正确吗？如果您这样编写函数会发生什么：

determineIndentTransform(index) {
    return (this.depth * 2) * index
},

Answer 2

您的determineIndentTransform呼叫有两个右括号“））”而不是一个。同样，在使用v-for时，切勿将数组索引用作键。它违反了key属性的目的，并且如果您的索引发生更改，Vue将无法检测到它（因为索引保持不变），这将导致严重的副作用。

在v-for中使用索引来操纵：style

2 个答案: