初始化不成功

Question

问题描述

show函数作为goods组件中调用food组件的函数，即点开商品详情的显示函数，将初始化设置传入到show函数中 但是初始化不成功 

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

//父组件
getfoodinfo(food, event) {
      this.foodInfo = food;
      this.$refs.foodInfoShowDom.show();
    },

//  子组件
<template lang="html">
  <transition name='foodInfo'>
  <div class="food-container" v-show="foodshow" ref="foodContainer">
    <div class="foodinfoall">
      <div class="food-top" >
        <div class="food-image-wrapper">
          <img class="food-image" :src="foodInfo.image" alt="">
        </div>
        <div class="food-back">
          <i class="iconfont icon-zuojiantou" @click="iconBack"></i>
        </div>
        <div class="food-about">
          <h1 class="title">{{foodInfo.name}}</h1>
          <div class="first">
            <span class="sellCount">月售{{foodInfo.sellCount}}份</span><span class="rating">好评率{{foodInfo.rating}}%</span>
          </div>
          <div class="food-price">
            <span class="food-price-one-icon">￥</span><span class="food-price-one">{{foodInfo.price}}</span><span v-show="foodInfo.oldPrice" class="food-price-two-icon">￥</span><span v-show="foodInfo.oldPrice" class="food-price-two">{{foodInfo.oldPrice}}</span>
          </div>
          <goodsControl :food="foodInfo" @getdom="toshopcarcontrol" class="goodsControl"></goodsControl>
          <transition name='toshopcar'>
          <div class="toshopcar" v-show="!$store.getters.foodid[foodInfo.name]" @click="toshopcar">
            <p>加入购物车</p>
          </div>
          </transition>
        </div>
      </div>
      <div class="food-info">
        <h1 class="food-info-title">商品介绍</h1>
        <p class="food-info-center">{{foodInfo.info}}</p>
      </div>
      <div class="food-evaluate">
        <h1 class="food-evaluate-title">商品评价</h1>
        <evaluateControl
          @changeEvaluate='changeEvaluate'
          :selectType='selectType'
          :onlyContent='onlyContent'
          :desc='desc'
          :ratings='foodInfo.ratings'
          >
        </evaluateControl>
        <div class="evaluateWrapper">
          <ul v-show="foodInfo.ratings && foodInfo.ratings.length " class="evaluateWrapperUl">
            <li  v-show="evaluateItem(foodEvaluatr.rateType, foodEvaluatr.text)" v-for="foodEvaluatr in foodInfo.ratings " :key='foodEvaluatr.username' class="evaluateWrapperLi">
              <p class="evaluateTime">
                <span class="etime">{{foodEvaluatr.rateTime}}</span>
              </p>
              <p class="evaluateText">
                <i class="iconfont " :class="{'icon-chax':foodEvaluatr.rateType===1, 'icon-zan':foodEvaluatr.rateType===0}"></i><span class="etext">{{foodEvaluatr.text}}</span>
              </p>
              <p class="evaluateuser">
                <span class="euser">{{foodEvaluatr.username}}</span>
                <img  class="eavatar" :src="foodEvaluatr.avatar" alt="" width="12px" height="12px">
              </p>
            </li>
          </ul>
          <div class="noEvaluateWrapper" v-show="!foodInfo.ratings || !foodInfo.ratings.length ">
          </div>
        </div>
      </div>
    </div>
  </div>
  </transition>
</template>
<script>
import BScroll from 'better-scroll';
import goodsControl from '../goodsControl/goodsControl.vue';
import evaluateControl from '../evaluateControl/evaluateControl.vue';
const ALL = 2;
const POSITIVE = 0;
const NEGATIVE = 1;
export default {
  data() {
    return {
      foodshow: false,
      selectType: ALL,
      onlyContent: true,
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    };
  },
  created() {
  },
  mounted() {
    this.scrollFoodinfo();
  },
  // 按钮逻辑
  methods: {
    evaluateItem(type, text) {
      if (this.onlyContent && !text) {
        return false;
      }
      if (this.selectType === ALL) {
        return true;
      } else {
        return type === this.selectType;
      }
    },
    // 将子组件 修改的按钮判断 传入父
    changeEvaluate(Type) {
      if (typeof Type === 'number') {
        this.selectType = Type;
        console.log(this.selectType);
      };
      if (typeof Type === 'boolean') {
        this.onlyContent = Type;

      };
    },
    scrollFoodinfo() {
      this.scrollFoodinfo = new BScroll(this.$refs.foodContainer, {
        click: true
      });
    },
    show() {
      console.log(this.selectType);
      this.onlyContent = true;
      this.selectType = ALL;
      this.foodshow = !this.foodshow;
      console.log(this.selectType);
    },
    iconBack() {
      this.foodshow = !this.foodshow;
      this.selectType = ALL;

    },
    toshopcar(event) {
      this.$emit('getdom', event.target);
      var data = {
        name: this.foodInfo.name,
        count: 1,
        price: this.foodInfo.price
      };
      this.$store.commit('toshopcar', data);
    },
    toshopcarcontrol(a) {
      this.$emit('getdom', a);
    }
  },
  components: {
    goodsControl,
    evaluateControl
  },
  props: ['foodInfo']
};
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/mixin.styl"
.food-container
  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 48px
  z-index: 20
  background-color: #f3f5f7
  &.foodInfo-enter,
  &.foodInfo-leave-to
    transform: translate3d(100%,0,0);
  &.foodInfo-enter-active,
  &.foodInfo-leave-active
    transition: all .5s
  .food-top
    margin-bottom: 16px
    border-bottom: 1px solid rgba(7,17,27,0.1)
    .food-image-wrapper
      position: relative;
      width: 100%
      height: 0
      padding-top: 100%
      .food-image
        position: absolute;
        top: 0
        left: 0
        width: 100%
        height: 100%
    .food-back
      position: absolute
      top: 10px
      left: 5px
      font-size: 20px
      color: white
    .food-about
      position: relative;
      padding: 18px
      background-color: white
      .title
        font-size: 14px
        font-weight: 700
        line-height: 14px
        color: rgb(7,17,27)
      .first
        margin-top: 8px
        .sellCount
        .rating
          margin-right: 12px
          font-size: 10px
          line-height: 10px
          color: rgb(147,153,159)
      .food-price
        margin-top: 18px
        font-size: 10px
        line-height: 24px
        color: rgb(147,153,159)
        .food-price-one-icon
          vertical-align: middle;
          color: red
        .food-price-one
          vertical-align: middle;
          font-size: 14px
          color: red
          font-weight: 700
        .food-price-two-icon

          margin-left: 8px
          text-decoration: line-through
        .food-price-two

          text-decoration: line-through
          font-weight: 700
      .toshopcar
        position: absolute;
        bottom: 21px
        right: 18px
        width: 74px
        font-size: 10px
        line-height: 12px
        height: 12px
        border-radius: 12px
        padding: 6px 12px
        background-color: rgb(0, 160, 220);
        color: rgb(255,255,255)
        text-align: center;
        &.toshopcar-enter,
        &.toshopcar-leave-to
          opacity: 0
        &.toshopcar-enter-active,
        &.toshopcar-leave-active
          transition: all 0.2s
      .goodsControl
        position: absolute;
        bottom: 18px
        right: 18px
  .food-info
    padding: 18px
    margin-bottom: 6px
    background-color: #fff
    border-top: 1px solid rgba(7,17,27,0.1)
    border-bottom: 1px solid rgba(7,17,27,0.1)
    .food-info-title
      font-size: 14px
      font-weight: 700
      line-height: 14px
      color: rgb(7,17,27)
    .food-info-center
      padding: 6px 8px 18px 8px
      margin-right: 12px
      font-size: 10px
      font-weight: 200
      line-height: 24px
      color: rgb(77,85,93)
  .food-evaluate
    margin-top: 16px
    padding: 18px 0
    margin-bottom: 6px
    background-color: #fff
    border-top: 1px solid rgba(7,17,27,0.1)
    .food-evaluate-title
      margin: 0 18px
      font-size: 14px
      font-weight: 700
      line-height: 14px
      color: rgb(7,17,27)
    .evaluateWrapper
      margin: 0 18px 0
      .evaluateWrapperUl
        .evaluateWrapperLi
          position: relative
          margin-top:16px
          padding-bottom: 16px
          border-1px( rgba(7,17,27,0.1) )
          &:last-child
            border-none()
          .evaluateTime
            .etime
              display: inline-block;
              vertical-align: top
              font-size: 10px
              line-height: 12px
              color :rgb(147, 153, 159);
          .evaluateText
            margin-top: 12px
            .iconfont
              display: inline-block;
              font-size: 12px
              line-height: 24px
            .icon-zan
              color: rgb(0, 160, 220);
            .icon-chax
              color: rgb(147, 153, 159);
            .etext
              font-size: 12px
              line-height: 16px
          .evaluateuser
            position: absolute;
            top: 0
            right: 0
            font-size: 0
            .euser
              display: inline-block;
              font-size: 10px
              line-height: 12px
            .eavatar
              margin-left: 6px
              border-radius: 50%
</style>

你期待的结果是什么？实际看到的错误信息又是什么？

商品评价 三个选项 和switch 进入改变之后 退出重进 已经初始化了