{"action":"created","issue":{"url":"https://api.github.com/repos/ElemeFE/element/issues/1319","repository_url":"https://api.github.com/repos/ElemeFE/element","labels_url":"https://api.github.com/repos/ElemeFE/element/issues/1319/labels{/name}","comments_url":"https://api.github.com/repos/ElemeFE/element/issues/1319/comments","events_url":"https://api.github.com/repos/ElemeFE/element/issues/1319/events","html_url":"https://github.com/ElemeFE/element/issues/1319","id":191349432,"number":1319,"title":"el-select multiple duplication error ?","user":{"login":"Fatih90","id":22959827,"avatar_url":"https://avatars.githubusercontent.com/u/22959827?v=3","gravatar_id":"","url":"https://api.github.com/users/Fatih90","html_url":"https://github.com/Fatih90","followers_url":"https://api.github.com/users/Fatih90/followers","following_url":"https://api.github.com/users/Fatih90/following{/other_user}","gists_url":"https://api.github.com/users/Fatih90/gists{/gist_id}","starred_url":"https://api.github.com/users/Fatih90/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Fatih90/subscriptions","organizations_url":"https://api.github.com/users/Fatih90/orgs","repos_url":"https://api.github.com/users/Fatih90/repos","events_url":"https://api.github.com/users/Fatih90/events{/privacy}","received_events_url":"https://api.github.com/users/Fatih90/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-11-23T18:31:53Z","updated_at":"2016-11-24T02:36:33Z","closed_at":null,"body":"### ElementUI version\r\n1.0.2\r\n\r\n### OS/Browers version\r\nWin10/Chrome 54\r\n\r\n### Vue version\r\n2.0.7\r\n\r\n### What is actually happening?\r\nwhen i try to create a multi select selection like below\r\n\r\n```vue\r\n<el-select placeholder=\"Select\" v-model=\"genres\" multiple @change=\"sortByGenres(genres)\">\r\n       <el-option v-for=\"item in sort_by_genres\" :label=\"item.label\" :value=\"item.value\">\r\n       </el-option>\r\n</el-select>\r\n```\r\n\r\nthen im getting this error  \r\n![screenshot_1](https://cloud.githubusercontent.com/assets/22959827/20574040/f61ca71c-b1b2-11e6-956a-9f85113246fd.png)\r\n\r\nmy code is this,\r\n\r\n```vue\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            source: '/api/discover/movie',\r\n            movies: [],\r\n            query: {\r\n                genres: null,\r\n            },\r\n            sort_by_genres: [\r\n               { value: '28', label: 'Action' },\r\n               { value: '12', label: 'Adventure' },\r\n               { value: '16', label: 'Animation' },\r\n               { value: '35', label: 'Comedy' },\r\n               { value: '80', label: 'Crime' },\r\n               { value: '99', label: 'Documentary' },\r\n               { value: '18', label: 'Drama' },\r\n               { value: '10751', label: 'Family' },\r\n               { value: '14', label: 'Fantasy' },\r\n               { value: '36', label: 'History' },\r\n               { value: '27', label: 'Horror' },\r\n               { value: '10402', label: 'Music' },\r\n               { value: '9648', label: 'Mystery' },\r\n               { value: '10749', label: 'Romance' },\r\n               { value: '878', label: 'Science Fiction' },\r\n               { value: '10770', label: 'TV Movie' },\r\n               { value: '53', label: 'Thriller' },\r\n               { value: '10752', label: 'War' },\r\n               { value: '37', label: 'Western' },\r\n            ]\r\n        }\r\n    },\r\n    created() {\r\n        this.fetchData()\r\n    },\r\n    methods: {\r\n        sortByGenres: function(genres) {\r\n            this.query.genres = genres\r\n            this.fetchData()\r\n        },\r\n        fetchData() {\r\n            var vm = this\r\n            vm.loading = true;\r\n            this.$http.get(`${this.source}?page=${this.query.page}&year=${this.query.year}&sort_by=${this.query.sort_by}&genres=${this.query.genres}`)\r\n            .then(function(response) {\r\n                vm.loading = false;\r\n                Vue.set(vm.$data, 'page_total', response.data.pagination.total)\r\n                Vue.set(vm.$data, 'movies', response.data.data)\r\n            })\r\n            .catch(function(response) {\r\n                console.log(response)\r\n            })\r\n        }\r\n    }\r\n}\r\n</script>\r\n\r\n```\r\n\r\nif i remove the 'multiple' from el-select everything works but i need multiple.\r\n\r\nwhat am i doing wrong ?\r\n\r\nps: im new in vue js "},"comment":{"url":"https://api.github.com/repos/ElemeFE/element/issues/comments/262677059","html_url":"https://github.com/ElemeFE/element/issues/1319#issuecomment-262677059","issue_url":"https://api.github.com/repos/ElemeFE/element/issues/1319","id":262677059,"user":{"login":"Leopoldthecoder","id":10095631,"avatar_url":"https://avatars.githubusercontent.com/u/10095631?v=3","gravatar_id":"","url":"https://api.github.com/users/Leopoldthecoder","html_url":"https://github.com/Leopoldthecoder","followers_url":"https://api.github.com/users/Leopoldthecoder/followers","following_url":"https://api.github.com/users/Leopoldthecoder/following{/other_user}","gists_url":"https://api.github.com/users/Leopoldthecoder/gists{/gist_id}","starred_url":"https://api.github.com/users/Leopoldthecoder/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Leopoldthecoder/subscriptions","organizations_url":"https://api.github.com/users/Leopoldthecoder/orgs","repos_url":"https://api.github.com/users/Leopoldthecoder/repos","events_url":"https://api.github.com/users/Leopoldthecoder/events{/privacy}","received_events_url":"https://api.github.com/users/Leopoldthecoder/received_events","type":"User","site_admin":false},"created_at":"2016-11-24T02:36:33Z","updated_at":"2016-11-24T02:36:33Z","body":"Works fine for me: http://jsfiddle.net/leopoldthecuber/b3kav68j/1/ . I removed the ajax part because it doesn't seem to affect our problem here.\r\n\r\nThere are a few things, though:\r\n```html\r\n<el-select placeholder=\"Select\" v-model=\"genres\" multiple @change=\"sortByGenres(genres)\">\r\n  <el-option v-for=\"item in sort_by_genres\" :label=\"item.label\" :value=\"item.value\">\r\n  </el-option>\r\n</el-select>\r\n```\r\n`genres` should be declared before you can bind it to `v-model`. Just add a key to the return object of `data()`:\r\n```javascript\r\ndata() {\r\n  return {\r\n    genres: [],\r\n    // other variables\r\n  }\r\n}\r\n```\r\nAnd, `@change=\"sortByGenres(genres)\"` should be `@change=\"sortByGenres\"`. You don't need to explicitly add the parameter because `el-select` itself passes it to the callback.\r\n\r\nSee if it works after these alterations."}}
{"actor":{"display_login":"Leopoldthecoder"}}