vue.js - 将新的迭代数据传递给 props Vue.js

Question

我有一个 vue 组件，我在其中获取数据并希望通过 props 传递迭代的结果数据。但是在 newModal 组件上，我收到了道具空对象。如何将我的迭代结果传递给结果对象？

    <template>
      <div>
            <div
              v-for=" result  in users"
              :key="result.id">
              <div>
                  {{ `${result.user.first_name} ${result.user.last_name}` }}
            </div>
            </div>
            <new-modal v-bind:result="result"/>
      </div>
    </template>

    <script>
    import { mapActions } from 'vuex';
    import newModal from './newModal.vue';

    export default {
      components: { newModal },
      data() {
        return {
          users: [],
          result: {},
        };
      },
      async mounted() {
        const { results } = await this.fetchAllUsers();
        this.users = results;
      },

      methods: {
        ...mapActions({
          fetchAllUsers: 'user/fetchAllUsers',
        }),
      },
    };
    </script>

Answer 1

变量范围：result仅限于循环，在循环result外无法访问，而是将 throw reference error，因此，new-modal在循环内移动，这也将使组件能够在每次迭代时被渲染

<div
  v-for="result  in users"
  :key="result.id"
>
  <div>
   {{ `${result.user.first_name} ${result.user.last_name}` }}
  </div>

  <!-- Here -->
  <new-modal v-bind:result="result"/> 
</div>