javascript - 如何使用 vue 多选通过循环创建对象

Question

我在 laravel 的项目中使用 vue 多选。以这种方式将选定的值保存在数据库中。

['value_on','value_two','value_three', and so on...]

在用户可以进行更新的部分，我需要显示来自数据库的值。
这是我需要创建的对象

   sizeValue: [
               {size: 'val_one},
              {size: 'val_two},
               {size: 'val_three}
              ...and so on

            ]

现在我只有一个空数组，我应该循环数据库中的数据。

 //This is the empty array
 sizeValue: [];

//This is the array coming from the server it will return['val_one','val_two','val_three',...and so on]
product.sizes

由于我对javascript没有太多经验，所以我想问一下如何获得此结果

     sizeValue: [
               {size: 'val_one},
              {size: 'val_two},
               {size: 'val_three}
              ...and so on

            ]

在空的 sizeValue 中循环来自 DB 的值 (product.sizes)。

标签： javascriptvue.js

Answer 1

您可以简单地创建sizeValue作为计算属性并使用 javascriptmap 函数。

这可能看起来像这样：

<script>
export default {
  computed: {
    sizeValue() {
      return this.product.sizes.map(productSize => {
        return {
          size: productSize
        };
      });
    }
  }
};
</script>

希望这可以帮助 ：）