Question

在我看来，我发现了某种错误。基本上我想按索引获取组件对象（用于标签）。但是我遇到了一个奇怪的问题。我在下面包含了我的代码的必要部分：

工作示例：

let steps = ['Handler', 'Categories', 'Finalize'];
export default {
    components: {
        Handler,
        Categories,
        Finalize
    },

    data() {
        return {
            step: 0,
            currentStep: steps[0] // When specifying index without a variable 
        }
    },

}

残破的示例：

let steps = ['Handler', 'Categories', 'Finalize'];
export default {
    components: {
        Handler,
        Categories,
        Finalize
    },

    data() {
        return {
            step: 0,
            currentStep: steps[this.step] // When specifying index by a variable 
        }
    },
}

在工作示例中，我正在获取组件（如预期的那样），但在破裂中，我正在Vue DevTools中获取currentStep: undefined。但是，控制台中没有错误。我在做什么错了？

Answer 1

您最好的选择是将currentStep移至computed property。另外，steps必须存在于data中，以便它们具有反应性：

let steps = ['Handler', 'Categories', 'Finalize'];
export default {
    components: {
        Handler,
        Categories,
        Finalize
    },

    data() {
        return {
            step: 0,
            steps,
        }
    },
    computed: {
      currentStep() {
        return this.steps[this.step];
      }
    }
}

如果可能，最好将steps直接粘贴在数据中：

data() {
    return {
        step: 0,
        steps: ['Handler', 'Categories', 'Finalize'];,
    }
},

（但是，如果您是从外部导入它们，则可能无法实现。我不知道您的特定用例）。

通常，在Vue中，当某些事情直接取决于某些组件属性的值时，要使用计算出的属性：它们既高效又清晰。

在您的原始代码中，如果currentStep有效，则step不会对step的更改做出反应。取而代之的是，只要使用currentStep更新，DECLARE @objname nvarchar(255) set @objname = N'漢字' select @objname就会相应地更新。

通过在Vue.JS中的变量中写入的索引获取数组元素时未定义

1 个答案: