{"id":20420055,"url":"https://github.com/cmllr/vue-editable","last_synced_at":"2025-04-12T18:05:24.980Z","repository":{"id":150292659,"uuid":"88515837","full_name":"cmllr/vue-editable","owner":"cmllr","description":"In-place editing for Vue.js 2.","archived":false,"fork":false,"pushed_at":"2017-06-06T20:30:59.000Z","size":64,"stargazers_count":16,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T12:21:24.354Z","etag":null,"topics":["in-place-editor","vue","vue-editable","vue2","x-editable"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cmllr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-17T14:25:25.000Z","updated_at":"2021-09-25T20:28:48.000Z","dependencies_parsed_at":"2023-05-14T14:45:51.088Z","dependency_job_id":null,"html_url":"https://github.com/cmllr/vue-editable","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmllr%2Fvue-editable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmllr%2Fvue-editable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmllr%2Fvue-editable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmllr%2Fvue-editable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cmllr","download_url":"https://codeload.github.com/cmllr/vue-editable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610363,"owners_count":21132920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["in-place-editor","vue","vue-editable","vue2","x-editable"],"created_at":"2024-11-15T06:41:24.089Z","updated_at":"2025-04-12T18:05:24.967Z","avatar_url":"https://github.com/cmllr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-editable\n\n[![](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org)\n[![Build Status](https://travis-ci.org/cmllr/vue-editable.svg?branch=master)](https://travis-ci.org/cmllr/vue-editable)\n\n\n![](https://raw.githubusercontent.com/cmllr/vue-editable/master/example/example.gif)\n \nIn-place editing for Vue.js 2.\n\n\u003e This plugin is still under active development. Do not use in production projects.\n\n## Bootstrap\n\n1. Include `vue-editable.min.js` and `vue-editable.min.css` from https://github.com/cmllr/vue-editable/releases\n2. Include the plugin via `Vue.use(editable)`\n\n## Core features\n\nThe directive `v-editable=dataMember` is the main directive. The attribute value is a existing property. If `dataMember` is a nested structure, simply use a `foo.bar.barz`-like syntax.\n\n```\n\u003clabel v-editable=\"message\"\u003e{{ message }}\u003c/label\u003e \n```\n\n### Danger ahead: Iterated edit\n\nIf you want to edit objects out of an loop, e. g. `v-for`, you have to inform the library what the given index of the object is.\n\nFor this purpose, you can use the `data-index` attribute. Note the `:` just before the attribute's name!\n\n```\n:data-index=\"key\"\n```\n\nIf your array does contain objects, not scalar types (like number or string), you also have to attribute the property which should be edited. For this purpose, you can use the attribute `data-property=name`. Please note: There is no `:` before the attribute name.\n\n```\ndata-property=\"customerName\"\n```\n\n## Attributes\n\nIf you want to control the display of the displayed input, e. g. with `input type='number'`, you can do this with the suffix `data-`. E. g. `type` becomes `data-type`, the content remains the same.\n\n## Events\n\n```\nvm.$on(name,function(e){\n    //do something\n});\n\n```\n\n|Event-Name|e|\n|-|-|\n|editable-changed|An object with members `newValue` and `oldValue` (dereferenced)|\n|editable-opened|the element which is currently edited|\n|editable-aborted|the element which should be edited|\n\n## Type keeping\n\nThe library tries to guess the old value type and converts the new value according to the determined type. There is currently not settings for turning this on or off or in case of switching types, e. g. form `int` to `float`.\n\n## Problems\n\n- `v-for` expression do not work overall\n- not pretty at all\n- kinda buggy\n- no tests\n- options missing\n- ES6 compalibity unknown\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmllr%2Fvue-editable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcmllr%2Fvue-editable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmllr%2Fvue-editable/lists"}