如何将数据“加载”到 Vue 组件中？

Question

试图将我的头脑围绕在组件上，我很难将官方的 vuejs.org 指南示例（主要使用 new Vue({...})）翻译成由 CLI 生成的全新 Vue 应用程序提供的模块结构。

如果我有类似的东西

const products = {
  'bat': '9.99',
  'glove': '7.50',
  'cleets': '12.50'
}

如何将其“加载”到组件中？

Products.vue

<template>
  <div>
    <li v-for="product in products">
      {{ product }}
    </li>
  </div>
</template>

<script>
  export default {
    name: 'Products',
    data: function () {
      products: ??   // <-- My understanding is the products data would be added here somehow?
    }
  }
</script>

然后，在“Home.vue”组件中，类似

<template>
   <div>
      <Products />
  </div>
</template>

<script>
  import Products from "@/components/Products.vue";

  export default {
    name: "Home",
    components: {
      Products,
    },
  };
</script>

有什么建议吗？谢谢你的帮助！很抱歉，如果它应该是显而易见的，那么无法弄清楚 Vue.js 的一个相当基本的概念是令人沮丧的 :(

---

根据@A.khalifa 的回复，我将Products.vue 修改为以下内容

<script>
export default {
  name: 'Products',
  data: function() {
    products: [{
      'bat': '9.99',
      'glove': '7.50',
      'cleets': '12.50'
    }]
  }
}
</script>

现在返回以下错误

10:5  error  Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key
23:5  error  'products:' is defined but never used                           no-unused-labels

我不确定如何处理 v-bind:key 指令...至于 products 我在指令中没有正确引用它吗？

Answer 1

你应该从你的data返回一个对象

data: function () {
    return {
        products: {
          'bat': '9.99',
          'glove': '7.50',
          'cleets': '12.50'
        }
    }
}

或

data() {
    return {
        products: {
          'bat': '9.99',
          'glove': '7.50',
          'cleets': '12.50'
        }
    }
}

在你的模板上

<li v-for="(price, name) in products" :key="name">
    {{ name }} = {{ price }}
</li>

在此处阅读有关基本组件的更多信息：https://vuejs.org/v2/guide/components.html#Base-Example

并在此处使用 v-for 与对象：https://vuejs.org/v2/guide/list.html#v-for-with-an-Object