如何从数据对象中选择单个数组项并将其传递给另一个组件？答案

【问题标题】：How do you select a single array item from a data object and pass it to another component?如何从数据对象中选择单个数组项并将其传递给另一个组件？
【发布时间】：2023-02-15 21:35:28
【问题描述】：

我有一些从 axios 获取并传递给 Bootstrap 表的数据。在我声明 nameOfPerson 字段的计算属性中，我创建了一个单击事件，因此当用户单击该名称时，将打开一个模式。此模态还包含表中显示的数据。

但是，我想更改它，以便当您单击一个人的名字时，只有那个人的数据会传递给模态。因此，我没有将包含所有用户数据的道具传递给模态，我只想要与我实际点击的名称相关的数据。

我将如何做到这一点？

家长：

<template>
 <b-container>
  <b-card class="mt-4">
  <b-table
    :items="dataItems"
    :fields="fields"
    :per-page="[5, 10]"
    sort-desc
    primary-key="id"
  />
</b-card>
<data-modal ref="dataModal" :selected-name="dataItems"/>
</b-container>
</template>

<script>
  import {axiosComponent} from '@/axios/services';
  import DataModal from '@/components/DataModal';

  export default {
    components: {
      DataModal
    },

    data() {
      return {
        dataItems: null,
      };
    },
    computed: {
      fields() {
        return [
          {
            key: 'nameOfperson',
            label: 'name',
            sortable: true
            click: () => this.$refs.dataModal.show(),
          },
          {
            key: 'ageOfPerson',
            label: 'Age',
            sortable: true
          },
        ]
      },
    },
    methods: {
      load(){
        axiosComponent.getData().then(result => {
          this.dataItems = result.data
        })
      }
    },
    created() {
      this.load()
    }
  };
</script>

孩子（模态）

  <template>
  <b-modal v-model="showModal">
    <div v-for="log in selectedName">
      {{ log }}
    </div>
  </b-modal>
</template>

<script>

  export default {
    props: {
      selectedName: Array
    },
    data() {
      return {
        showModal: false,
      };
    },
    methods: {
      show(){
        this.showModal = true
      }
    }
  };
</script>

【问题讨论】：

当所选用户发生更改时，您的表可以 emit 一条消息（以及它在 dataItems 中的索引，如果需要，还可以是整个对象）。然后，父母可以使用该数据打开模型。

标签： vue.js vuejs2

【解决方案1】：

您可以使用@row-selected方法，看看下面的演示：

Vue.component('child', {
  template: `
    <b-modal v-model="showModal">
    <div v-for="log in selectedName">
      {{ log }}
    </div>
  </b-modal>
  `,
  props: {
    selectedName: {
      type: Array
    },
  },
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    show(){
      this.showModal = true
    }
  }
})
new Vue({
  el: "#demo",
  data() {
    return {
      dataItems: null,
      selected: null,
      show: false
    };
  },
  computed: {
    fields() {
      return [
        {
          key: 'nameOfperson',
          label: 'name',
          sortable: true,
        },
        {
          key: 'ageOfPerson',
          label: 'Age',
          sortable: true
        },
      ]
    },
  },
  methods: {
    load(){
     // axiosComponent.getData().then(result => {
        this.dataItems = [{id: 1, nameOfperson: 'aaa', ageOfPerson: 5}, {id: 2, nameOfperson: 'bbb', ageOfPerson: 25}, {id: 3, nameOfperson: 'ccc', ageOfPerson: 35}, {id: 4, nameOfperson: 'ddd', ageOfPerson: 45}]
     // })
    },
    onRowSelected(items) {
      this.selected = items
      this.$refs.dataModal.show()
    },
  },
  created() {
    this.load()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
  <b-container>
    <b-card class="mt-4">
    <b-table
      :items="dataItems"
      :fields="fields"
      :per-page="5"
      sort-desc
      primary-key="id"
      selectable
      :select-mode="'single'"
      @row-selected="onRowSelected"
    />
    </b-card>
    <child ref="dataModal" :selected-name="selected"></child>
  </b-container>
</div>

【讨论】：