weixin_57362036 2021-09-27 22:21 采纳率: 45.2%
浏览 53
已结题

v-modle 双向绑定父子组件传值

我现在是利用v-modle双向绑定的父子组件,请求接口和编辑数据已经实现了,现在出现一个问题是 后端调用接口返回的数据为何不显示出来,还是什么方法才可以


<template>
  <div class="Contentarea">
    <div class="Contitles">
      <el-tabs
        v-model="activeProductTab"
        type="card"
        :editable="!isDetail"
        @edit="editProductTab"
      >
        <el-tab-pane
          v-for="pitem in product"
          :key="pitem.name"
          :label="pitem.title"
          :name="pitem.name"
        >
          <div class="Contitlescontent">
            <div class="titl">
              <div class="banner">产品基本信息</div>
              <div class="ExandCol" @click="pitem.collapse = !pitem.collapse">
                {{ pitem.collapse ? "收起" : "展开" }}
                <i
                  :class="
                    pitem.collapse
                      ? 'iconfont icon-pulldown'
                      : 'iconfont icon-withdraw'
                  "
                ></i>
              </div>
            </div>
            <div v-show="pitem.collapse">
              <div class="hide">
                <div class="hide_left">
                  <div class="regionhide">
                    <span class="Commonstyle">产品名称: </span>
                    <div style="width: 306px; margin-left: -48px">
                      <el-input
                        maxlength="20"
                        v-model="pitem.productname"
                        placeholder="请输入产品名称"
                        :disabled="isDetail"
                        @input="pitem.title = pitem.productname"
                      ></el-input>
                    </div>
                    <span
                      class="chooses"
                      @click="pitem.isOpenProj = true"
                      v-if="!isDetail"
                      >选择产品</span
                    >
                    <SelectProduct
                      v-show="pitem.isOpenProj"
                      @seleproj="selectProj"
                      @canproj="selectProj"
                      :data="pitem"
                    ></SelectProduct>
                  </div>
                  <div class="regionhide">
                    <span class="Commonstyle"> 产品类型:</span>
                    <div style="width: 306px; margin-left: -48px">
                      <jh-select
                        v-model="pitem.prodtype"
                        codeset="CRM007"
                        required
                        placeholder="请选择"
                        :outputText="isDetail"
                      ></jh-select>
                    </div>
                  </div>
                  <div class="Sysdescription">
                    <div style="margin-left: 64px; display: flex">
                      <span class="Commonstyle">产品描述: </span>
                      <div
                        class="description"
                        style="width: 760px; margin-left: 7px"
                      >
                        <el-input
                          v-model="pitem.proddesc"
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          placeholder="请输入详细的产品描述..."
                          :disabled="isDetail"
                        ></el-input>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="hide_right">
                  <div class="regionhide">
                    <span class="Commonstyle"> 产品规格:</span>
                    <div style="width: 306px; margin-left: -48px">
                      <el-input
                        v-model="pitem.normsname"
                        placeholder="请输入产品规格"
                        :disabled="isDetail"
                      ></el-input>
                    </div>
                  </div>
                  <div class="regionhide">
                    <span class="Commonstyle">规格报价:</span>
                    <div style="width: 306px; margin-left: -48px">
                      <el-input
                        v-model="pitem.price"
                        placeholder="请输入规格报价"
                        :disabled="isDetail"
                      ></el-input>
                    </div>
                    <span class="Percent"></span>
                  </div>
                </div>
              </div>
              <div class="System_module">
                <div class="info">
                  <div class="infos">系统基础信息</div>
                  <div
                    class="System_ExandCol"
                    @click="pitem.systemcollapse = !pitem.systemcollapse"
                  >
                    {{ pitem.systemcollapse ? "收起" : "展开" }}
                    <i
                      :class="
                        pitem.systemcollapse
                          ? 'iconfont icon-withdraw'
                          : 'iconfont icon-pulldown'
                      "
                    ></i>
                  </div>
                </div>
                <div class="System_span" v-show="pitem.systemcollapse">
                  <el-tabs
                    v-model="pitem.activeSystemTab"
                    type="card"
                    :editable="!isDetail"
                    @tab-add="editSystemTab('', pitem)"
                    @tab-remove="editSystemTab"
                  >
                    <el-tab-pane
                      v-for="sitem in pitem.system"
                      :key="sitem.name"
                      :label="sitem.title"
                      :name="sitem.name"
                    >
                      <div class="Systeminfo">
                        <div class="Systen_left">
                          <div class="Systename">
                            <span> 系统名称:</span>
                            <div style="width: 306px">
                              <el-input
                                v-model="sitem.sysname"
                                placeholder="请输入内容"
                                @input="sitem.title = sitem.sysname"
                                :disabled="isDetail"
                              ></el-input>
                            </div>
                          </div>
                          <span
                            class="chosePro"
                            @click="sitem.isOpenSys = true"
                            v-if="!isDetail"
                            >选择系统</span
                          >
                          <SelectSystem
                            v-show="sitem.isOpenSys"
                            @selesys="selectSys"
                            @canproj="selectSys"
                            :data="sitem"
                          ></SelectSystem>
                          <div class="Systemstage">
                            <span> 耗费人天:</span>
                            <div style="width: 306px">
                              <el-input
                                v-model="sitem.artificial"
                                placeholder="请输入内容"
                                :disabled="isDetail"
                              ></el-input>
                            </div>
                          </div>
                          <div class="SystemDiere">
                            <span> 系统描述:</span>
                            <div style="width: 767px">
                              <el-input
                                v-model="sitem.sysdesc"
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请输入详细的系统描述..."
                                :disabled="isDetail"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                        <div class="Systen_right">
                          <div class="System_type">
                            <span> 系统类型:</span>
                            <div style="width: 306px">
                              <jh-select
                                v-model="sitem.systype"
                                codeset="CRM006"
                                required
                                :outputText="isDetail"
                                placeholder="请选择客户联系方式"
                              ></jh-select>
                              <!-- <el-input
                                v-model="sitem.systype"
                                placeholder="请输入内容"
                                :disabled="isDetail"
                              ></el-input> -->
                            </div>
                          </div>
                          <div class="System_type" style="margin-top: 4px">
                            <span> 系统报价:</span>
                            <div style="width: 306px">
                              <el-input
                                placeholder="请输入内容"
                                v-model="sitem.price"
                                :disabled="isDetail"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="info">
                        <div class="infos">模块信息</div>
                        <div
                          class="System_ExandCol"
                          @click="sitem.modulecollapse = !sitem.modulecollapse"
                        >
                          {{ sitem.modulecollapse ? "收起" : "展开" }}
                          <i
                            :class="
                              sitem.modulecollapse
                                ? 'iconfont icon-withdraw'
                                : 'iconfont icon-pulldown'
                            "
                          ></i>
                        </div>
                      </div>
                      <div class="Module_span" v-show="sitem.modulecollapse">
                        <el-tabs
                          v-model="sitem.activeModuleTab"
                          type="card"
                          :editable="!isDetail"
                          @tab-add="editModuleTab('', sitem)"
                          @tab-remove="editModuleTab"
                        >
                          <el-tab-pane
                            v-for="mitem in sitem.module"
                            :key="mitem.name"
                            :label="mitem.title"
                            :name="mitem.name"
                          >
                            <div class="System_template_info">
                              <div class="System_template_infos">
                                <div class="System_template_moudleinfo">
                                  <div class="System_template_moudleinfo_title">
                                    <div style="display: flex">
                                      <div class="images">
                                        <!-- <img
                                          src="../../../assets/images/business/images/moudle.png"
                                        /> -->
                                      </div>
                                      <span></span>
                                    </div>
                                  </div>
                                  <div class="Systeminfo">
                                    <div class="Systen_left">
                                      <div class="Systename">
                                        <span>模块名称:</span>
                                        <div
                                          style="
                                            width: 306px;
                                            margin-left: 15px;
                                          "
                                        >
                                          <el-input
                                            v-model="mitem.modulename"
                                            placeholder="请输入模块名称"
                                            :disabled="isDetail"
                                            @input="
                                              mitem.title = mitem.modulename
                                            "
                                          ></el-input>
                                        </div>
                                      </div>
                                      <span
                                        class="chosePro"
                                        @click="mitem.isOpenModule = true"
                                        v-if="!isDetail"
                                        >选择模块</span
                                      >
                                      <SelectModule
                                        v-show="mitem.isOpenModule"
                                        @listshangji="selectModule"
                                        @gettelephone="selectModule"
                                        :data="mitem"
                                      />
                                      <div class="Systemstage">
                                        <span> 耗费人天:</span>
                                        <div
                                          style="
                                            width: 306px;
                                            margin-left: 15px;
                                          "
                                        >
                                          <el-input
                                            v-model="mitem.artificial"
                                            placeholder="请输入耗费人天"
                                            :disabled="isDetail"
                                          ></el-input>
                                        </div>
                                      </div>
                                      <div class="Systemstage">
                                        <span> 模块描述:</span>
                                        <div
                                          style="
                                            width: 306px;
                                            margin-left: 15px;
                                          "
                                        >
                                          <el-input
                                            v-model="mitem.moduledesc"
                                            placeholder="请输入模块描述"
                                            :disabled="isDetail"
                                          ></el-input>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="Systen_right">
                                      <div class="System_type">
                                        <span> 模块报价:</span>
                                        <div
                                          style="
                                            width: 291px;
                                            margin-left: 15px;
                                          "
                                        >
                                          <el-input
                                            v-model="mitem.price"
                                            placeholder="请输入模块报价"
                                            :disabled="isDetail"
                                          ></el-input>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="infobottom">
                                    <div class="info">
                                      <div class="infos">模块功能列表</div>
                                    </div>
                                    <div class="tableInfo">
                                      <el-table
                                        :data="mitem.func"
                                        tooltip-effect="dark"
                                        border
                                        style="
                                          width: 100%;
                                          background: #f6f6f6;
                                          border: 1px solid #dddddd;
                                        "
                                      >
                                        <el-table-column
                                          type="selection"
                                          width="55"
                                        ></el-table-column>
                                        <el-table-column
                                          prop="funcname"
                                          label="功能名称"
                                          width="auto"
                                        >
                                          <template slot-scope="scope">
                                            <div
                                              class="MiddleEdit"
                                              v-show="!isDetail"
                                            >
                                              <el-input
                                                v-model="scope.row.funcname"
                                              ></el-input>
                                            </div>
                                          </template>
                                        </el-table-column>
                                        <el-table-column
                                          prop="funcdesc"
                                          label="功能描述"
                                          width="auto"
                                        >
                                          <template slot-scope="scope">
                                            <div
                                              class="password"
                                              v-show="!isDetail"
                                            >
                                              <el-input
                                                v-model="scope.row.funcdesc"
                                              ></el-input>
                                            </div>
                                          </template>
                                        </el-table-column>
                                        <el-table-column
                                          prop="funcprice"
                                          label="功能报价"
                                          width="auto"
                                        >
                                          <template slot-scope="scope">
                                            <div
                                              class="trialStatus"
                                              v-show="!isDetail"
                                            >
                                              <el-input
                                                v-model="scope.row.funcprice"
                                              ></el-input>
                                            </div>
                                          </template>
                                        </el-table-column>
                                        <el-table-column
                                          prop="artificial"
                                          label="耗费工时(天)"
                                          width="auto"
                                        >
                                          <template slot-scope="scope">
                                            <div
                                              class="trialStatus"
                                              v-show="!isDetail"
                                            >
                                              <el-input
                                                v-model="scope.row.artificial"
                                              ></el-input>
                                            </div>
                                          </template>
                                        </el-table-column>
                                        <el-table-column
                                          fixed="right"
                                          label="操作"
                                          width="auto"
                                          v-show="!isDetail"
                                        >
                                          <template
                                            style="#FE5D5D"
                                            slot-scope="scope"
                                          >
                                            <el-button
                                              width="20"
                                              type="text"
                                              size="small"
                                              @click="
                                                removeRunc(mitem, scope.$index)
                                              "
                                              >移除</el-button
                                            >
                                          </template>
                                        </el-table-column>
                                      </el-table>
                                    </div>
                                    <el-row v-show="!isDetail">
                                      <el-button
                                        type="primary"
                                        plain
                                        size="medium"
                                        @click="addFunc(mitem)"
                                        >新增一行</el-button
                                      >
                                    </el-row>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-tab-pane>
                        </el-tabs>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import SelectProduct from "../../CRM/business/compents/Selectproduct.vue";
import SelectSystem from "../../CRM/business/compents/selectSyst.vue";
import SelectModule from "./Selectmodule.vue";

export default {
  components: {
    SelectProduct,
    SelectSystem,
    SelectModule,
  },
  props: {
    value: Array,
    isDetail: Boolean,
  },
  data() {
    return {
      activeProductTab: "1",
      product: this.value,
      
    };
  },
  mounted: function () {
    if (this.value && this.value.length == 0) {
      this.product.push(this.initProductObject(0));
    }
  },
  watch: {
    product() {
      this.$emit("input", this.product);
    },
  },
};
</script>



  • 写回答

3条回答 默认 最新

  • 你好!机器人 2021-09-28 09:28
    关注

    在watch实时监听看看

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 12月1日
  • 已采纳回答 11月23日
  • 创建了问题 9月27日

悬赏问题

  • ¥15 流式socket文件传输答疑
  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥15 寻找能匹配的液晶显示屏。