Question

我在问我们在vuejs中是否具有与独立服务器相似的属性。我想在认证中添加项目。这是添加按钮：

<l-button  @click="Add()"><i class="fa fa-plus"> </i></l-button>

添加功能：

        Add() {
            this.certifications.push( item);
            this.newItemAdded = true
        },


 <div v-for="(item,index) in certifications">
      <fg-input type="text" required
                  :label="$t('candidate.certification.title')"
                  :placeholder="$t('candidate.certification.title')" 
                  :disabled="disableIt && !newItemAdded ">
        </fg-input>
  </div>

我的问题是，当我添加新项目时，先前的输入也被启用了。

我想知道vuejs中是否有类似于独立的东西（例如angular）。

Answer 1

您必须使用index和length of certifications

<div v-for="(item,index) in certifications">
      <fg-input type="text" required
                  :label="$t('candidate.certification.title')"
                  :placeholder="$t('candidate.certification.title')" 
                  :disabled="(index+1!==certifications.length)">
       </fg-input>
</div>

以及在需要编辑按钮时：

  data() {
    return {
      certifications: [],
      editableIndex: null
    }
  },
  methods: {
    Add() {
      ...
    },
    Edit(index) {
      this.editableIndex = index
    },
  }
}

和在模板中

<template>
   <div>
    <div v-for="(item,index) in certifications">
      <fg-input type="text" required
                  :label="$t('candidate.certification.title')"
                  :placeholder="$t('candidate.certification.title')" 
                  :disabled="(index+1!==certifications.length&&editableIndex===null) || editableIndex===index">
      </fg-input>
      <l-button  @click="Edit(index)"><i class="fa fa-pen"> </i></l-button>
    </div>
    <l-button  @click="Add()"><i class="fa fa-plus"> </i></l-button>
   </div>
</template>

在vueJS中有类似于Standalone吗

1 个答案: