Question

这是我使用Vue CLI的第三天，我想将作为数组的props传递给2个不同的组件。这些组件称为产品和模态。模态组件取决于产品组件。当我将道具传递到App.vue中的两个组件时，我不希望两个组件都在App.vue中呈现。就像我说的那样，我的Modal组件依赖于我的Products组件。

我的总体目标是在我的模型中显示产品标题，照片和说明。

我遇到的问题是我在App.vue中发出了一个get请求，该请求填充了一个空数组，然后将其传递给Products组件。如果我将数组作为props传递给Products和Modal，则我将获得一个额外的模态以在应用程序级别进行渲染，这确实是有道理的，但我不希望这样做。

我仍然习惯于Vue的工作方式，技巧或帮助将不胜感激。

这可能是一个很明显的答案，我只是忽略了，但是我正在学习，所以请理解。

App.Vue（我在这里发出我的get请求，并填充一个空数组，然后将该数组作为对两个组件的支持而传递）：

<template>
<div id="app">
  <all-products v-bind:newProductsArray="newProductsArray"></all-products>
</div>
</template>

<script>
//imports
import Vue from 'vue'
import AllProducts from './components/AllProducts.vue'
import Modal from './components/Modal.vue'
//import so I can use vue resource for an http request
import VueResource from 'vue-resource'
Vue.use(VueResource)

    //export components to be rendered by main.js then by the DOM
    export default {
      components: {
        'all-products': AllProducts
      },
      data() {
        return {
          //empty products array to be filled after get request
          products: [],
          //declare new array to be set to products array, then passed as props. I do this because without another array,
          //all products component will receiev an empty array before it can be filled by the http request.
          newProductsArray: []
        }
      },
      //request to retrieve all products from API using Created
      created() {
        //http request using vue resource from dependencies
        this.$http.get('https://tap-on-it-exercise-backend.herokuapp.com/products').then(function(data) {
          //fill products array by grabbing the data, slicing ot, then setting it to products array
          this.products = data.body.slice(0, data.body.length)
          //set products array to the new array to be passed down as props to all products component.
          this.newProductsArray = this.products
        })
      }
    }
    </script>

产品组件（此组件从app.vue接收道具）：

<template>
<div class="products">
  <h1 class="all-products">All Products</h1>
  <div v-for="product in newProductsArray" :key="product.id" class="single-product">
    <div class="product-container">
      <div class="row">
        <div class="col-md-8 center-block">
          <div class="title">{{product.title}}</div>
          <img class="images" :src="product.photo_url">
          <div class="price">${{product.price}}</div>
          <modal/>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
//imports
import Vue from 'vue'
import Modal from './Modal.vue'
//import bootstrap to be used to style buttons and modal.
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

export default {
  //receive new products array as props from app
  props: ['newProductsArray'],
  components: {
    'modal': Modal
  },

  data() {
    return {
      //set modal show to false by default
      modalShow: false
    }
  },

  methods: {

    showModal() {
      //toggle modal to show
      this.modalShow = true
    },

    closeModal() {
      //toggle modal to close
      this.modalShow = false
    }

  },

}
</script>

模块组件（我想接收与产品收到的道具相同的道具）

<template>
  <div>
    <b-button @click="modalShow = !modalShow">Show Product Info</b-button>
    <b-modal v-model="modalShow" title="title">
    <div class="modal-body">
      <img class="img-responsive" style="margin:0 auto;" src="http://placehold.it/300x340" alt="">
    </div>
      <p class="product-description">Description</p>
      <div slot="modal-footer" class="w-100">
        <b-button size="md" class="float-right" variant="warning" @click="modalShow=false">Close</b-button>
        <b-button size="md" class="float-right" variant="primary" @click="modalShow=false">Like</b-button>
      </div>
    </b-modal>
  </div>
</template>

<script>
  export default {
    props: ['newProductsArray'],
    data() {
      return {
        modalShow: false
      }
    }
  }
</script>

将构成数组的道具传递给2个不同的组件

0 个答案: