将Vue绑定到关联数组

Question

我需要一个在字符串上键入的数组。

    data: {
       items: {
          i['one']: true;
          i['two']: false;
       }
    }
    // get value later
    let a = vm.items.i['one'];

如何在Vue中定义关联数组？还是有另一种方法可以做到这一点？

Answer 1

这里Vue没有什么特别的，只是JavaScript。简单对象可以用作关联数组。简而言之：

data: {
   items: {
      i: {
         one: true,
         two: false
      }
   }
}

虽然您可以以let a = vm.items.i['one'];的形式访问值，但方括号通常用于访问动态值或包含特殊字符的值。写let a = vm.items.i.one;会更正常。

Answer 2

我想我现在通过添加的评论了解您的问题。

此section of the documentation可以为您提供帮助。您可以这样声明数据对象：

// data must be a function
data() {
  return {
    items: {
      i: {}
    }
  }
}

然后添加如下所示的项目：

vm.$set(this.items.i, 'one', true);
vm.$set(this.items.i, 'two', false);

// and later retrieve
let key = 'one';
let a = vm.items.i[key];

请记住，由于组件中的data must be a function，您有可能避免$set()的调用，并在data（）函数中的“构造时”设置data对象。

原始答案

听起来并不崇高，但我建议您阅读有关Javascript基础的更多内容。所谓的关联数组只是Javascript中的一个对象。这与vue.js无关。

方法如下：

data: {
   items: {
      i: {
         one: true,
         two: false,
      }
   }
}

Answer 3

JavaScript中的关联数组也使我感到困惑，直到我意识到JavaScript不像其他语言那样支持关联数组。这是该主题的不错页面，位于w3schools.com。

在该页面上：“许多编程语言都支持带有命名索引的数组。

“具有命名索引的数组称为关联数组（或哈希）。

“ JavaScript不支持带有命名索引的数组。

“在JavaScript中，数组始终使用编号索引。”

该页面还包含以下通知：“警告！ 如果使用命名索引，JavaScript会将数组重新定义为标准对象。 之后，某些数组方法和属性将产生错误的结果。”