{"id":13362065,"url":"https://github.com/gaoding-inc/v-model","last_synced_at":"2025-10-14T12:56:33.446Z","repository":{"id":128932033,"uuid":"76054749","full_name":"gaoding-inc/v-model","owner":"gaoding-inc","description":"V-Model is a model plugin for Vue.js, like ng-resource.","archived":false,"fork":false,"pushed_at":"2019-01-21T10:05:27.000Z","size":60,"stargazers_count":56,"open_issues_count":3,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-14T12:56:32.763Z","etag":null,"topics":["axios","ngresource","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gaoding-inc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-09T17:09:22.000Z","updated_at":"2025-09-29T13:18:17.000Z","dependencies_parsed_at":"2023-07-03T20:16:02.111Z","dependency_job_id":null,"html_url":"https://github.com/gaoding-inc/v-model","commit_stats":null,"previous_names":["huanleguang/v-model"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gaoding-inc/v-model","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoding-inc%2Fv-model","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoding-inc%2Fv-model/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoding-inc%2Fv-model/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoding-inc%2Fv-model/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaoding-inc","download_url":"https://codeload.github.com/gaoding-inc/v-model/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaoding-inc%2Fv-model/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018582,"owners_count":26086583,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["axios","ngresource","vue"],"created_at":"2024-07-29T22:01:48.717Z","updated_at":"2025-10-14T12:56:33.416Z","avatar_url":"https://github.com/gaoding-inc.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","Utilities"],"sub_categories":["Utilities","HTTP Requests"],"readme":"## V-Model\n\n[![npm version](https://img.shields.io/npm/v/v-model.svg?style=flat-square)](https://www.npmjs.org/package/v-model)\n[![build status](https://img.shields.io/travis/laoshu133/v-model.svg?style=flat-square)](https://travis-ci.org/laoshu133/v-model)\n\nV-Model is a model plugin for Vue.js, like ng-resource.\nbased on axios, path-to-regexp, and bluebird.\n\nThe V-Model provides interaction support with RESTful services, can work with Vue.js 1.x and 2.x.\n\nSee more about [ng-resource](https://docs.angularjs.org/api/ngResource/service/$resource)\n\n## Installation\n\n```\n\u003e npm i -S v-model\n```\n\n```javascript\nimport Model from 'v-model';\n\n// set baseURL\nModel.http.defaults.baseURL = '//api.laoshu133.com';\n\n// install\nVue.use(Model);\n```\n\n## Usage\n\n```javascript\nimport Vue from 'vue';\nimport Model from 'v-model';\n\n// set baseURL\nModel.http.defaults.baseURL = '//api.laoshu133.com';\n\n// install plugin\nVue.use(Model);\n\nconst PostModel = Model.extend('/posts/:id', {\n    publish: { method: 'POST' }\n}, {\n    EDITING: 0,\n    PUBLISHED: 1\n});\n\nconst app = new Vue({\n    el: '#app',\n    data: {\n        post: new PostModel({\n            status: PostModel.EDITING,\n            content: '',\n            title: ''\n        })\n    },\n    methods: {\n        load(id) {\n            this.post = PostModel.get({\n                id: id\n            });\n\n            return this.post.$promise;\n        },\n        save(data) {\n            return this.post.$save(data);\n        }\n    }\n});\n```\n\n## Model Factory\n\nBefore you can create model(s), you need to generate a Model.\n\n```javascript\nModel.extend(url, actions, staticProps, options);\n```\n\n#### url\n\nAn Express-style path string, e.g `/posts/:id`.\n\n#### actions\n\nHash with declaration of custom actions.\n\n```\n{\n    action1: {method:?, params:?, isArray:?, headers:?, ...},\n    action2: {method:?, params:?, isArray:?, hasPagination:?, ...}\n}\n```\n\nDefault actions:\n\n```\n{\n    get: { method: 'GET' },\n    save: { method: 'POST' },\n    update: { method: 'PUT' },\n    delete: { method: 'DELETE' },\n    query: { method: 'GET', isArray:true }\n};\n```\n\nWhere:\n\n- `action` {String} The name of action.\n- `method` {String} Case insensitive HTTP method (e.g. GET, POST, PUT, DELETE, JSONP, etc).\n- `params` {Object} Optional set of pre-bound parameters for this action.\n- `headers` {Object} Optional set of pre-bound request headers for this action.\n- `timeout` {Number} timeout in milliseconds.\n- `isArray` {Boolean} If true then the returned object for this action is an array.\n- `hasPagination` {Boolean} Only work with `isArray: true`, if true then tranform the request result to `{items: requestResult, pagination: {num: ?, size: ?, total: ?}}`\n\n\n#### staticProps\n\nHash with declaration of static properties.\n\n```\nModel.extend('/posts/:id', null, {\n    EDITING: 0,\n    PUBLISHED: 1\n});\n```\n\n#### options\n\nSet http request default settings for.\n\nWhere:\n\n- `baseURL` will be prepended to `url` unless `url` is absolute.\n- `headers` are custom headers to be sent\n\nSee more [axios config](https://github.com/mzabriskie/axios#request-config)\n\n\n## API\n\nWith static method:\n\n```javascript\n// get single post\nconst post = PostModel.get({\n    id: 1\n});\n\n// get post list\nconst posts = PostModel.query({\n    status: PostModel.PUBLISHED\n});\n\n// update\nconst post = PostModel.update({\n    id: 1,\n    title: 'New post title'\n});\n\n// delete\nPostModel.delete({\n    id: 1\n});\n```\n\nWith instance method:\n\n```javascript\n// create/save\nlet post = new PostModel();\nlet promise = post.$save({\n    title: 'Post title'\n})\n\n// update\nlet post = new PostModel({\n    id: 1,\n    title: 'Post title'\n});\nlet promise = post.$update({\n    title: 'New post title'\n});\n```\n\n## Pagination\n\nV-Model support pagination via reponse headers `X-Pagination`.\n\nSome http request:\n\n```\n\u003e GET /posts?page_num=1\u0026page_size=20 HTTP/1.1\n\u003e Host: api.laoshu133.com\n\u003e User-Agent: curl/7.49.1\n\u003e\n\u003c HTTP/1.1 200 OK\n\u003c Content-Type: application/json; charset=utf-8\n\u003c X-Pagination: {\"num\":1,\"size\":20,\"total\":44}\n\n[{\"id\":1,\"title\":\"Post title\",\"content\":\"content...\"}]\n```\n\nUsage:\n\n```javascript\nconst PostModel = Model.extend('/posts/:id', {\n    query: { method: 'get', hasPagination: true }\n});\n\nlet postsData = PostModel.query({\n    page_size: 20,\n    page_num: 1\n});\n\npostsData.$promise.then(data =\u003e {\n    console.log(data === postsData); // true\n    console.log(postsData); // { \"pagination\":{\"num\":1,\"size\":20,\"total\":44}, \"items\": [...]}\n});\n```\n\n## Cancellation\n\nSometimes we need to abort the request, such as quick switch page number.\n\nUsage:\n\n```javascript\nimport Model from 'v-model';\nimport Pormise from 'bluebird';\n\n// enable bluebird cancellation\nPromise.config({\n    cancellation: true\n});\n\nconst PostModel = Model.extend('/posts/:id', {\n    query: { method: 'get', hasPagination: true }\n});\n\nnew Vue({\n    data() {\n        return {\n            query: {\n                page_num: 1\n            },\n            itemsData: {\n                pagination: { num: 1, size: 20, total: 0 },\n                items: []\n            }\n        }\n    },\n    methods: {\n        load() {\n            // Cancel the last request\n            // If it has not responded yet\n            let promise = this.itemsData.$promise;\n            if(promise) {\n                promise.cancel();\n            }\n\n            // make a new request\n            this.itemsData = PostModel.query(query);\n        }\n    },\n    watch: {\n        query() {\n            this.load();\n        }\n    },\n    created() {\n        this.load();\n    }\n});\n```\n\n\n## $resolved flag\n\nThe V-Model instance/result has a `$resolved` flag.\nCan be used for loading status.\n\nUsage:\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv class=\"main\"\u003e\n        \u003cdiv class=\"list\"\u003e\n            \u003cdiv v-if=\"!itemsData.$resolved\" class=\"loading\"\u003eLoading...\u003c/div\u003e\n            \u003cul v-else\u003e\n                \u003cli v-for=\"item in itemsData.items\"\u003e{{item.id}}\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"pagination\" v-if=\"itemsData.$resolved\"\u003e...\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport Model from 'v-model';\n\nconst PostModel = Model.extend('/posts/:id', {\n    query: { method: 'get', hasPagination: true }\n});\n\nexport default {\n    data() {\n        return {\n            itemsData: {\n                pagination: { num: 1, size: 20, total: 0 },\n                items: []\n            }\n        };\n    },\n    created() {\n        this.itemsData = PostModel.query({\n            page_num: 1\n        });\n    }\n};\n\u003c/script\u003e\n```\n\n\n## Interceptors\n\nYou can intercept requests or responses.\n\n```\n// global interceptor\nconst http = PostModel.http;\n\n// request\nhttp.interceptors.request.use(beforeSend, requestError);\n\n// response\nhttp.interceptors.response.use(afterSend, responseError);\n```\n\nSee more [axios Interceptors](https://github.com/mzabriskie/axios#interceptors)\n\n\n## Running tests\n\n```\n\u003e npm test\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaoding-inc%2Fv-model","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaoding-inc%2Fv-model","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaoding-inc%2Fv-model/lists"}