Question

这是我关于 Stack Overflow 的第一个问题，所以我会尽力而为。

我正在构建一个 Vue 应用程序，并在 css 网格中呈现来自 API 的对象列表，当我单击图片时，我打开一个显示完整图片和有关它的一些信息的模式，很明显，这是 Instagram 的副本。

所以模态是一个可重用的组件，我使用 props 将数据从父组件发送到组件子组件。这是我的问题，因为我将完整的数据列表发送到道具，而不仅仅是我点击的图片的信息。

是否可以只发送有关我单击的元素的信息，我知道可以使用 router-link 但如何使用 props 来实现？

这里是父元素的代码：

<ul v-for="post in doc.posts" :key="post.id">
          <button v-on:click="toggleModale">
          <modal
            v-bind:revele="revele"
            v-bind:toggleModale="toggleModale"
            v-bind:media_url="post.media_url"
            v-bind:like_count="post.like_count"
          ></modal>
          <div class="post">
            <img class="postImage" :src="post.media_url" alt="" />
          </div>
           </button>
        </ul>

以及子组件modal的代码：

    <template>
  <div v-if="revele" class="container">
    <div class="overlay" v-on:click="toggleModale"></div>
    <div class="modal">
      <button class="btnCls" v-on:click="toggleModale">X</button>
      <h2>Je suis un modal</h2>
      <div class="image"><img :src="media_url" alt=""></div>
      <div class="text">{{like_count}}</div>

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

<script>
export default {
  name: "modal",
  props: ['revele', 'toggleModale', 'media_url', 'media_type', 'like_count', 'comments_count', 'timestamp', 'permalink', 'id'],
  created() {
    console.log("test modal props id",this.id)  //undefined;
  },
};
</script>

预先感谢您的帮助

更新代码沙箱：

https://codesandbox.io/s/boring-andras-tmyqc?file=/src/App.vue

Answer 1

说实话，你的架构有点奇怪，但我让你成为了一个可以工作的沙箱

CodeSandbox

请先检查代码，如果您需要帮助理解，我会向您解释我做了什么。

VueJS：如何将数据从 v-for 列表传递给组件

1 个答案: