时间戳

首页 > 解决方案 > 是否有类似于 vueJS 中的独立

vue.js - 是否有类似于 vueJS 中的独立

问题描述

我在问我们是否在 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 中是否有类似于独立（如角度）的东西。

标签： vue.js

解决方案

您必须使用indexandlength 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>

推荐阅读