Scope of variables in Vuejs

Question

I have seen this often and vuejs, I'm sure I'm missing some vuejs concepts to understand the problem here. I'm trying to show the form for editing my contract with a "edit" variable. My idea is to set false the variable "edit" by default, conditioning all the divs that I want to hide with this variable (edit) when is false. And changing the variable to true when clicking on the pen-icon.

But if I change this edit variable I show absolutely all the forms on the DOM not the one just on that iteration of the for loop. If someone understands me and have an idea it would be super welcome hehe. Thanks.

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

Troncoso · Accepted Answer · 2020-08-19 00:34:15Z

1

You need a separate edit variable for each form generated by the for loop. You could have an edit array and check v-if="!edit[index]". And for the button edit[index] = !edit[index].

Of course, you need to ensure the number of elements in your array matches how many forms you are generating

answered Aug 19, 2020 at 0:34

Troncoso

2,4635 gold badges35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arderoma Over a year ago

Thanks! That's a clever solution! I have created a new component and now is working. I still don't know why. It seems that having a new component makes every "edit" variable a different one? I'm missing VueJs context.

Collectives™ on Stack Overflow

Scope of variables in Vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related