Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ridaamirini/vue-cloneya

A Vue.js 2 component to clone DOM elements
https://github.com/ridaamirini/vue-cloneya

clone component forms input jquery-clone vue

Last synced: 2 months ago
JSON representation

A Vue.js 2 component to clone DOM elements

Lists

README

        

# vue-cloneya
[![npm](https://img.shields.io/npm/v/vue-cloneya.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-cloneya)
[![npm](https://img.shields.io/npm/dt/vue-cloneya.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-cloneya)
[![npm](https://img.shields.io/npm/l/vue-cloneya.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-cloneya)

> A vue component to clone DOM elements



[Live demo here](https://codesandbox.io/s/rmoq935pjp)

## Install

```bash
yarn add vue-cloneya
# or
npm i vue-cloneya
```

## Import

```js
import Vue from 'vue'
import VueCloneya from 'vue-cloneya'

Vue.use(VueCloneya)
```
## Example
```vue















```
#### Output:
```Javascript
[
"Some value",
// ...
]
```

#### With multiple elements:
```vue
















```
#### Output:
```Javascript
[
{
Firstname: "VALUE",
Lastname: "VALUE"
}
// ...
]
```

## API

### Props

#### minimum

- __Type__: `number`
- __Default__: `1`

The minimum number of clones allowed.

#### maximum

- __Type__: `number`
- __Default__: `1`

The maximum number of clones allowed.

#### value

- __Type__: `array`
- __Default__: `null`

The values for the v-cloneya-input. For Two-way Data Binding use `v-model`

#### multiple

- __Type__: `boolean`
- __Default__: `false`

Enables multiple `v-model` on multiple `v-cloneya-input` elements. `Sinice 1.0.6`

### Events

When minimum limit is reached:
- `minimum:cloneya`

When maximum limit is reached:
- `maximum:cloneya`

## Directives

#### cloneyaInput
v-cloneya-input

- __Type__: `string` _optional_

If `:multiple="true"` is enabled, you must supply the key where you wanted to retrieve the data on `v-model`

#### cloneyaAdd
v-cloneya-add

#### cloneyaRemove
v-cloneya-remove

## Development

```bash
# for dev
yarn dev
#or
npm run dev

# build with parcel-bundler
yarn build
#or
npm run build

```

## License

MIT © [ridaamirini](https://github.com/ridaamirini)