{"action":"reopened","issue":{"url":"https://api.github.com/repos/ktsn/vue-range-slider/issues/36","repository_url":"https://api.github.com/repos/ktsn/vue-range-slider","labels_url":"https://api.github.com/repos/ktsn/vue-range-slider/issues/36/labels{/name}","comments_url":"https://api.github.com/repos/ktsn/vue-range-slider/issues/36/comments","events_url":"https://api.github.com/repos/ktsn/vue-range-slider/issues/36/events","html_url":"https://github.com/ktsn/vue-range-slider/issues/36","id":326852217,"number":36,"title":"How to use with vuex?","user":{"login":"alancwoo","id":1481890,"avatar_url":"https://avatars0.githubusercontent.com/u/1481890?v=4","gravatar_id":"","url":"https://api.github.com/users/alancwoo","html_url":"https://github.com/alancwoo","followers_url":"https://api.github.com/users/alancwoo/followers","following_url":"https://api.github.com/users/alancwoo/following{/other_user}","gists_url":"https://api.github.com/users/alancwoo/gists{/gist_id}","starred_url":"https://api.github.com/users/alancwoo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alancwoo/subscriptions","organizations_url":"https://api.github.com/users/alancwoo/orgs","repos_url":"https://api.github.com/users/alancwoo/repos","events_url":"https://api.github.com/users/alancwoo/events{/privacy}","received_events_url":"https://api.github.com/users/alancwoo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-05-27T21:24:50Z","updated_at":"2018-05-28T21:14:54Z","closed_at":null,"author_association":"NONE","body":"I have a number of sliders I need to have update an object in a vuex store, but am a bit confused about what the best way is to do this.\r\n\r\nSay I have an object in my store:\r\n\r\n```\r\nsettings: {\r\n   height: 100\r\n   width: 100\r\n   quality: 1000\r\n}\r\n```\r\n\r\nThen I have sliders and a computed property in a component:\r\n```\r\n<range-slider class=\"slider\" min=\"1\" max=\"100\" step=\"1\" v-model=\"settings.height\">\r\n<range-slider class=\"slider\" min=\"1\" max=\"100\" step=\"1\" v-model=\"settings.width\">\r\n<range-slider class=\"slider\" min=\"1\" max=\"100\" step=\"1\" v-model=\"settings.quality\">\r\n\r\n...\r\n\r\ncomputed: {\r\n   ...mapState([\r\n      'settings'\r\n   ])\r\n}\r\n```\r\n\r\nI've tried binding a method on the input of the range-slider:\r\n\r\n```\r\n<range-slider class=\"slider\" min=\"1\" max=\"100\" step=\"1\" v-model=\"settings.height\" @input=\"updateHeight>\r\n\r\n...\r\n\r\nmethods: {\r\n  updateHeight(el) {\r\n    this.$store.commit('UPDATE_HEIGHT', el.target.value)\r\n  }\r\n}\r\n```\r\n\r\nWhich obviously wouldn't work since it's bound to the component itself, not the actual slider input. I also tried binding something to the `@change` event that's emitted but am just not sure how to get the value attached to the `<range-slider>`\r\n\r\nI've read through [this github issue on the vuex repository - Easy two-way binding between v-model and vuex #1084](https://github.com/vuejs/vuex/issues/1085) but it seems like I don't need such a complex (and still immature) solution, I feel like I'm missing something obvious!\r\n\r\nAlso, thank you for this wonderful component."}}
{"actor":{"display_login":"alancwoo"}}