0

script代码如下

  export default {
    name: 'RouteCard',
    props: ['orderProp'],
    data() {
      return {
        order: this.orderProp,
        show: true
      };
    },
    onLoad() {
      this.height = uni.getSystemInfoSync().windowHeight;
    },
    methods: {
      tabChange(val) {
        this.currentTab = val.tab;
        this.currentComponent = this.componentList[this.currentTab];
      },
      checkDetial(val) {
        console.log(val)
      }
    },
    watch: {
      // 无法监控到变化
      order: {
        deep:true,
        handler: function(newVal, oldVal) {
          this.show = false
          console.log('newValue', newVal);
          console.log('oldValue', oldVal);
        }
      }
    }
  };

每次启动该组件,都会报错image.png
这行错误指向的是红色框的代码,
此处我使用的是uni-app框架,不了解的朋友可以吧 view标签 当做 div标签 ~~~~
image.png
蓝色框代码不会报错。

我希望不会再报 name of undefine 这样的错误,我应该怎么修改?
我的设想是,监听order的变化(父组件传来的值赋值给order),值变化的时候,将show设置为true,但是监听不到prop的变化。~~~~

10月18日提问
2 个回答
0

已采纳
  1. 你如果想监听父组件传的值,这里应该监听 orderProp

    export default {
      name: 'RouteCard',
      props: {
        orderProp: {
          type: Object,
          default: () => ({}),
        },
      },
      data() {
        return {
          order: this.orderProp,
          show: true,
        };
      },
      computed: {
        order() {},
      },
      onLoad() {
        this.height = uni.getSystemInfoSync().windowHeight;
      },
      methods: {
        tabChange(val) {
          this.currentTab = val.tab;
          this.currentComponent = this.componentList[this.currentTab];
        },
        checkDetial(val) {
          console.log(val);
        },
      },
      watch: {
        // 无法监控到变化
        orderProp: {
          deep: true,
          handler: function(newVal, oldVal) {
            this.show = false;
            this.order = newVal;
            console.log('newValue', newVal);
            console.log('oldValue', oldVal);
          },
        },
      },
    };
  2. 渲染 name 那个可以改成:

    order.driver && order.driver.name
0

1.报错可以通过v-if限制,有值显示。
2.orderorderProp赋值过来的,他们并不是双向绑定的,order数据没变化,所以无法触发监听。你可以尝试监听orderProp,如果不行的话建议你使用vuex,全局注册用于组件之间的数据共享。

撰写答案

推广链接