Vue.js Vuejs中变量的范围

我经常在vuejs中看到这一点，我确信我缺少一些vuejs概念来理解这里的问题。我试图用一个“edit”变量显示用于编辑合同的表单。 我的想法是在默认情况下将变量“edit”设置为false，当该变量为false时，调整我想用该变量（edit）隐藏的所有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>

{{templateContract.created_at}}
{{getDateDayMonth（templateContract.created_at）}
{{getDateYear（templateContract.created_at）}
{{templateContract.title}
（{{templateContract.usecasetitle}}）
{{templateContract.description}}
克劳斯林·贝尔贝滕
集合洛申

从“@/services/ContractTypeService”导入ContractTypeService；
导出默认值{
名称：“模板合同列表组件”，
数据（）{
返回{
模板合同：[]，
编辑：false，
};
},
方法：{
getDateYear:函数（日期字符串）
{
返回dateString.substring（0,4）；
},
getDateDayMonth:函数（dateString）
{
return dateString.substring（0，10）.split（“-”）.reverse（）.join（“-”）.substring（0，5）.replace（“-”，“）；
},
异步更新模板（templateContract）
{
this.edit=false；
常数{
正文：{data}，
}=等待ContractTypeService.update（templateContract.id，templateContract，“templateContract”）；
返回数据；
},
异步删除（templateContract，索引）
{
如果（确认（“您是否愿意接受我的邀请？”）
{
this.$delete（this.templateContracts，index）；
常数{
正文：{data}，
}=等待ContractTypeService.delete（“templatecontract”，templatecontract.id）；
返回数据；
}
}
},
异步创建（）{
这是。加载=真；
//获取用户的模板合同
常数{
正文：{data}，
}=等待ContractTypeService.getRelated（“templatecontract”）；
this.templateContracts=data[Object.keys（data）[0]]；
这一点：加载=错误；
},
};

对于for循环生成的每个表单，都需要一个单独的编辑变量。您可以使用编辑数组并选中

v-if=“！edit[index]”

。对于按钮<代码>编辑[索引]=！编辑[索引]

---

当然，您需要确保数组中的元素数量与生成的表单数量相匹配

谢谢！这是一个聪明的解决方案！我已经创建了一个新组件，现在正在工作。我还是不知道为什么。似乎有了一个新的组件，每个“编辑”变量就不同了？我缺少VueJs上下文。

<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>