Question

我有一个选项卡式视图，我需要将一个值从选择字段传递到选项卡，但我没有正确获取道具。这是父级：

<template>
  <div>
    <b-form-group id="memberListing" label-for="memberListing" class="mr-sm-2">
      <b-form-select
        v-model="memberSelection"
        :title="memberSelection"
        @change="getUserID"
        aria-describedby="memberListing"
      >
        <option disabled value="" selected>Mitglied auswählen</option>

        <option
          v-for="member in memberList"
          v-bind:key="member"
          :value="member.cb_userid"
          lazy
        >
          {{member.user_name}}
        </option>
      </b-form-select>
    </b-form-group>
    <Biometrics :title="memberSelection"></Biometrics>

    <b-card title="Card Title" no-body>
      <b-card-header header-tag="nav">
        <b-nav card-header tabs>
          <b-nav-item to="/users/profile" exact exact-active-class="active"
            >Profil</b-nav-item
          >
          <b-nav-item
            to="/users/trainingsplans"
            exact
            exact-active-class="active"
            >Trainingspläne</b-nav-item
          >
          <b-nav-item to="/users/biometrics" exact exact-active-class="active"
            >Biometrie</b-nav-item
          >
        </b-nav>
      </b-card-header>

      <b-card-body>
        <router-view></router-view>
      </b-card-body>
    </b-card>
  </div>
</template>

<script>
import axios from 'axios'
import Biometrics from "@/components/users/biometrics.vue";
export default {
    data: () => {
        return {
            profileList: 'http://localhost:8000/userProfiles/profileList',
            memberList: [],
            memberSelection: null,
        }
    },
    props: {
    },
    components: {
        Biometrics
    },
    async mounted() {
        try {
            let memberListData = await axios.get(this.profileList)
            this.memberList = memberListData.data
            console.log(this.memberList)
        } catch (e) {
            this.errors.push(e)
        }
    },
    methods: {
        getUserID: function () {
            // this.childMemberSelect = this.memberSelection
            // console.log(this.childMemberSelect)
        },
    },
}
</script>

我错过了什么？我现在尝试了几个小时，但是当我选择该值时，我无法让该值显示在指定的选项卡中。

Answer 1

这是孩子：

<pre>
    <template>
     <div>
     {{title}} 
     </div>
    </template>
    <script>
    export default {
      created () {
          console.log(this.title)
      },
      methods: {},
     props: {
         title: Number,
     },
            data() {
                return {
                }
            },
        components:{},
    }
    </script>

</pre>

VueJS 道具问题缺少一些东西

1 个答案: