【问题标题】:VueJS props issue something missingVueJS 道具问题缺少一些东西
【发布时间】:2021-08-04 13:35:56
【问题描述】:

我有一个选项卡式视图,我需要将一个值从选择字段传递到选项卡,但我没有得到正确的道具。这是父母:

<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>

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

【问题讨论】:

    标签: vue.js vue-props


    【解决方案1】:

    这是孩子:

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

    【讨论】:

    • 请重新格式化您的代码,并将其放在您的问题上,而不是通过创建答案。
    猜你喜欢
    • 2015-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多