Vue子组件没有动态更新

问题描述

我在尝试更改子组件时不知所措。

我正在使用 dhtmlx 甘特图，根据所附图片（第二张）。我试图隐藏包含任务名称等的左侧网格（动态），因为特别是在 iPad 上，它占用了大量空间。

我想动态更改它。我推导出可以通过将网格的宽度设置为零来完成。

gantt.config.grid_width = this.showGrid;

如果我将 showGrid 设置为 0，则它不会显示网格。（第一张图片）

在父级中这是 gridWidth。

 <gantt
    v-if="showGant"
      :key="componentKey"
      class="left-container"
      :tasks="tasks"
      :showGrid="gridWidth"
      @task-updated="logTaskUpdate"
      @link-updated="logLinkUpdate"
      @task-selected="selectTask"
    ></gantt>

但我希望它能够动态完成，因为有时需要编辑和添加任务。

子组件 - dhtmlx 甘特图

loadGantt() {
      gantt.config.xml_date = "%Y-%m-%d";
      gantt.config.highlight_critical_path = true;
      gantt.config.grid_width = this.showGrid;
      gantt.attachEvent("onTaskSelected",(id) => {
        let task = gantt.getTask(id);
        this.$emit("task-selected",task);
      });
      gantt.attachEvent("onTaskIdChange",(id,new_id) => {
        if (gantt.getSelectedId() == new_id) {
          let task = gantt.getTask(new_id);
          this.$emit("task-selected",task);
        }
      });
      gantt.config.grid_width = this.showGrid;
      gantt.init(this.$refs.gantt);
      gantt.createDataProcessor((entity,action,data,id) => {
        this.$emit(`${entity}-updated`,id,data);
      });
      gantt.parse(this.$props.tasks);
      console.log(this.showGrid)
    }