vue.js - Vuejs 中的变量范围

问题描述

我经常看到这个和 vuejs，我确定我错过了一些 vuejs 概念来理解这里的问题。我正在尝试使用“编辑”变量显示用于编辑合同的表单。我的想法是在默认情况下将变量“edit”设置为 false，当为 false 时，调节我想用这个变量（编辑）隐藏的所有 div。并在单击钢笔图标时将变量更改为 true。

但是，如果我更改此编辑变量，我将绝对显示 DOM 上的所有表单，而不是仅在 for 循环的迭代中显示的表单。如果有人理解我并有一个想法，那将是非常受欢迎的，呵呵。谢谢。

<div class="row">
      <div class="col-12 mb-3" :class="{'disabled': disable}" v-for="templateContract, index in templateContracts" :key="templateContract.id" :id="templateContract.id">
        <div class="d-sm-block d-md-none">
          <h4><span class="text-info">{{templateContract.created_at}}</span></h4>
        </div>
        <div class="row custom-contract-row">
          <div class="col-2 d-sm-none d-md-flex custom-contract-date">
            <div class="custom-contract-left-border">
            </div>
            <!--<div class="date-status-top">
              <span class="text-info">Status</span>
            </div>-->
            <div class="center">
              <span class="text-info">{{getDateDayMonth(templateContract.created_at)}}</span>
            </div>
            <div class="date-status-bottom">
              <span class="text-info">{{getDateYear(templateContract.created_at)}}</span>
            </div>
          </div>
          <div class="col-10 col-sm-12 col-md-10 col-lg-10 custom-contract-content">
            <div class="title-underline">
              <div>
                <h4 class="mt-2 template-title" v-if="!edit" v-on:dblclick="edit()">{{templateContract.title}}<font-awesome-icon icon="pen" class="ml-3 h6 edit-title-icon" /></h4>
                <input type="text" class="form-control" v-if="edit" v-model="templateContract.title" />
                <h5 class="template-usecasetitle" v-if="!edit">({{templateContract.usecasetitle}})</h5>
                <input type="text" class="form-control" v-if="edit" v-model="templateContract.usecasetitle" />
              </div>
            </div>
            <div class="row pt-2">
              <div class="col-12 mb-5 pb-5 p-1 pr-3 pl-lg-3">
                <input type="text" class="form-control" v-if="edit" v-model="templateContract.description" />
                <h5 class="font-weight-normal" v-if="!edit">
                  {{ templateContract.description }}
                </h5>
              </div>
            </div>
            <div class="d-flex action-buttons">
              <div class=""><router-link to="/edit-template-contract" tag="a" class="btn btn-primary">Klauseln bearbeiten</router-link></div>
              <div class=""><button class="btn btn-primary" @click="remove(templateContract, index)">Muster löschen</button></div>
            </div>
          </div>
          <span class="edit-template-data-icon"  @click="edit = !edit"><font-awesome-icon icon="pen" /></span>
          <span class="edit-template-data-icon" v-if="edit" @click="updateTemplate(templateContract)"><font-awesome-icon icon="check" /></span>
        </div>
      </div>
    </div>

<script>
import ContractTypeService from "@/services/ContractTypeService";

export default {
  name: "template-contract-listing-component",
  data() {
    return {
      templateContracts: [],
      edit: false,
    };
  },
  methods: {
    getDateYear: function(dateString)
    {
      return dateString.substring(0, 4);
    },
    getDateDayMonth: function(dateString)
    {
      return dateString.substring(0, 10).split("-").reverse().join("-").substring(0, 5).replace('-', '.');
    },
    async updateTemplate(templateContract)
    {
      this.edit = false;
      const {
          body: { data },
        } = await ContractTypeService.update(templateContract.id, templateContract, "templatecontract");
        return data;
    },
    async remove(templateContract, index)
    {
      if(confirm("Wollen Sie den Vertrag wirklich löschen?"))
      {
        this.$delete(this.templateContracts, index);
        const {
          body: { data },
        } = await ContractTypeService.delete("templatecontract", templateContract.id);
        return data;
      }
    }
  },
  async created() {
    this.loading = true;
    // fetch template contracts for user
    const {
      body: { data },
    } = await ContractTypeService.getRelated("templatecontract");
    this.templateContracts = data[Object.keys(data)[0]];
    this.loading = false;
  },
};
</script>

标签： vue.js

vue.js - Vuejs 中的变量范围

问题描述

解决方案

推荐阅读