Question

Vue.js全新，我正在松散地关注Vuex的课程，我正在制作一个购物车和产品列表，我继续从我看过的其他一些教程开始，所以我的项目中有一些组件。我想将我的购物车组件粘贴在我的产品列表组件中，而不是将它们放在两个不同的页面上。我搞乱了路线而且我搞乱了产品列表组件，但是我无法让它工作，我要么得到一个空页面（只有app.vue可见的链接）并且没有错误或者错误页面。

ShoppingCart.vue

<template>
    <div>
        <h1>Shopping Cart</h1>
        <ul>
            <li v-for="product in products">
                {{product.title}} - {{product.price}} - {{product.quantity}}
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        name: 'ShoppingCart'
    }
</script>

<style scoped>

</style>

ProductList.vue

<template>
    <div>
        <h1>Product List</h1>
        <img v-if="loading" src="https://i.imgur.com/JfPpwOA.gif" />
        <ul v-else>
            <li v-for="product in products">
                {{product.title}} - {{product.price}} - {{product.inventory}}
                <button @click="addProductToCart(product)">Add to cart</button>
            </li>
        </ul>
    </div>
</template>

<script>
    import ShoppingCart from '@/components/ShoppingCart'
    export default {
        name: 'ProductList',
        components: {
            ShoppingCart
        },
        data () {
            return {
                loading: false
            }
        },
        computed: {
            products () {
                return this.$store.getters.availableProducts
            }
        },
        methods: {
            addProductToCart (product) {
                this.$store.dispatch('addProductToCart', product)
            }
        },
        created () {
            this.loading = true
            this.$store.dispatch('fetchProducts')
                .then(() => this.loading = false)
        }
    }
</script>

<style scoped>
    ul {
        list-style-type: none;
    }
</style>

App.vue

<template>
  <div id="app">
    <ul>
      <li class="nav"><router-link to="/" class="hdrNav">Users</router-link></li>
      <li class="nav"><router-link to="/test" class="hdrNav">Test</router-link></li>
      <li class="nav"><router-link to="/ProductList" class="hdrNav">Store</router-link></li>
    </ul>
    <hr />
    <router-view/>
    <!--
    <Test msg="Hello"></Test>
    <Users></Users>
    -->
  </div>
</template>

<script>
import Test from '@/components/test'
import Users from '@/components/users'
import ProductList from '@/components/ProductList'

export default {
  name: 'App',
  components: {
    Test,
    Users,
    ProductList
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
li.nav {
  font-size: 30px;
  padding-right: 15px;
  padding-left: 15px;
  list-style-type:  none;
  display: inline-block;

}
.hdrNav {
  text-decoration: none;
}
.hdrNav:hover {
  color: orangered;
}
hr {
  margin-bottom: 25px;
}
</style>

index.js（路线）

import Vue from 'vue'
import Router from 'vue-router'
import Test from '@/components/test.vue'
import Users from '@/components/users.vue'
import ProductList from '@/components/ProductList.vue'
import ShoppingCart from '@/components/ShoppingCart.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Users',
      component: Users
    },
    {
      path: '/Test',
      name: 'Test',
      component: Test
    },
    {
      path: '/ProductList',
      name: 'Product List',
      components: {ProductList, ShoppingCart}
    }
  ]
})

Answer 1

展示位置就是一切...在我的名为<ShoppingCart />的文件中，我一直在导入组件，然后尝试在</div>之后和</template>标签之前添加<ShoppingCart /> ，当我这样做时，我收到了一个错误，我决定尝试在</div>内移动<template> <div> <h1>Product List</h1> <img v-if="loading" src="https://i.imgur.com/JfPpwOA.gif" /> <ul v-else> <li v-for="product in products"> {{product.title}} - {{product.price}} - {{product.inventory}} <button @click="addProductToCart(product)">Add to cart</button> </li> </ul> <ShoppingCart /> </div> </template> <script> import ShoppingCart from '@/components/ShoppingCart' export default { name: 'ProductList', components: { ShoppingCart }, data () { return { loading: false } }, computed: { products () { return this.$store.getters.availableProducts } }, methods: { addProductToCart (product) { this.$store.dispatch('addProductToCart', product) } }, created () { this.loading = true this.$store.dispatch('fetchProducts') .then(() => this.loading = false) } } </script> <style scoped> ul { list-style-type: none; } </style>标签并开始工作......

<强> ProductList.vue

{{1}}

Vue.js通过路由在页面中的另一个组件中使用组件

1 个答案: