{"action":"created","issue":{"url":"https://api.github.com/repos/yuche/vue-strap/issues/407","repository_url":"https://api.github.com/repos/yuche/vue-strap","labels_url":"https://api.github.com/repos/yuche/vue-strap/issues/407/labels{/name}","comments_url":"https://api.github.com/repos/yuche/vue-strap/issues/407/comments","events_url":"https://api.github.com/repos/yuche/vue-strap/issues/407/events","html_url":"https://github.com/yuche/vue-strap/issues/407","id":188764846,"number":407,"title":"No store or mutations on v2?","user":{"login":"FerchoCarcho","id":11180135,"avatar_url":"https://avatars.githubusercontent.com/u/11180135?v=3","gravatar_id":"","url":"https://api.github.com/users/FerchoCarcho","html_url":"https://github.com/FerchoCarcho","followers_url":"https://api.github.com/users/FerchoCarcho/followers","following_url":"https://api.github.com/users/FerchoCarcho/following{/other_user}","gists_url":"https://api.github.com/users/FerchoCarcho/gists{/gist_id}","starred_url":"https://api.github.com/users/FerchoCarcho/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FerchoCarcho/subscriptions","organizations_url":"https://api.github.com/users/FerchoCarcho/orgs","repos_url":"https://api.github.com/users/FerchoCarcho/repos","events_url":"https://api.github.com/users/FerchoCarcho/events{/privacy}","received_events_url":"https://api.github.com/users/FerchoCarcho/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-11-11T13:54:25Z","updated_at":"2016-11-12T20:46:45Z","closed_at":null,"body":"@wffranco\r\nI dont understand the logic inside Vuestrap 2, because...\r\n@ //App.vue\r\n\r\n```\r\n<template>\r\n  <div id=\"app\">\r\n\r\n      <alert v-model=\"valert\" placement=\"top\" :duration=\"3000\"\r\n             type=\"success\" width=\"400px\" dismissable\r\n      >\r\n            {{item}}\r\n      </alert>\r\n    <router-view></router-view>\r\n\r\n  </div>\r\n</template>\r\n\r\n<script type=\"text/ecmascript-6\">\r\n\r\n  import { mapGetters } from 'vuex'\r\n  import { alert } from 'vue-strap'\r\n  import Cnavbar from './Cnavbar.vue'\r\n  import Cfooter from './Cfooter.vue'\r\n\r\nexport default {\r\n  name: 'app',\r\n  components: {\r\n      alert\r\n  },\r\n    computed: mapGetters({\r\n        valert: 'getAlert'\r\n    }),\r\n\r\n  data(){\r\n    return{\r\n      item:'this is an alert',\r\n    }\r\n  }\r\n}\r\n</script>\r\n<style lang=\"less\">\r\n  @import \"../../node_modules/vue2-animate/src/vue2-animate.less\";\r\n</style>\r\n<style lang=\"sass\">\r\n  @import '../../assets/sass/backend/backend.scss';\r\n</style>\r\n```\r\nAs you can see I use store and mutations\r\nAlso I need to use the [vue 2 Animate](https://github.com/asika32764/vue2-animate) for animation.\r\n inside testalert I call the mutation.\r\n@ //testalert.vue\r\n\r\n```\r\n<template>\r\n    <div class=\"container\">\r\n                <button @click.prevent=\"toggle\">show </button>\r\n     </div> \r\n</template>\r\n<script type=\"text/ecmascript-6\">\r\n\r\n    import { mapMutations } from 'vuex'\r\n\r\n    export default {\r\n    name:'testalert',\r\n    methods:{\r\n            ...mapMutations({\r\n                toggle: 'TOGGLE_ALERT'\r\n            })\r\n    }\r\n}\r\n</script>\r\n```\r\n@//Alert.vue\r\n```\r\n<template>\r\n  <transition name=\"fadeLeft\">\r\n    <div v-show=\"val\" :class=\"['alert', 'alert-'+type, placement]\" :style=\"{width:width}\" role=\"alert\">\r\n      <button v-show=\"dismissable\" type=\"button\" class=\"close\" @click=\"val = false\">\r\n        <span>&times;</span>\r\n      </button>\r\n      <slot></slot>\r\n    </div>\r\n  </transition>\r\n</template>\r\n\r\n```\r\nHere at the vuestrap alert component Im using the fadeLeft effect from the library.\r\nBut It doesnt work because It uses the precompiled (as I understand) Fade Effect.\r\nAlso, when the alert is dissmisable\r\n` [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: \"value\" `\r\nBecause you need mutations to modify the state of The alert.\r\nWould It be possible to make that kind of distribution work with Vuestrap?\r\nIf not, Could you provide a simple example how to Use e.g Alert ?\r\nIdeally, you would need to provide 1. the component 2. the vuex Store 3. the initizalization. "},"comment":{"url":"https://api.github.com/repos/yuche/vue-strap/issues/comments/260147421","html_url":"https://github.com/yuche/vue-strap/issues/407#issuecomment-260147421","issue_url":"https://api.github.com/repos/yuche/vue-strap/issues/407","id":260147421,"user":{"login":"wffranco","id":1977287,"avatar_url":"https://avatars.githubusercontent.com/u/1977287?v=3","gravatar_id":"","url":"https://api.github.com/users/wffranco","html_url":"https://github.com/wffranco","followers_url":"https://api.github.com/users/wffranco/followers","following_url":"https://api.github.com/users/wffranco/following{/other_user}","gists_url":"https://api.github.com/users/wffranco/gists{/gist_id}","starred_url":"https://api.github.com/users/wffranco/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wffranco/subscriptions","organizations_url":"https://api.github.com/users/wffranco/orgs","repos_url":"https://api.github.com/users/wffranco/repos","events_url":"https://api.github.com/users/wffranco/events{/privacy}","received_events_url":"https://api.github.com/users/wffranco/received_events","type":"User","site_admin":false},"created_at":"2016-11-12T20:46:45Z","updated_at":"2016-11-12T20:46:45Z","body":"still not ready all components for vue2, working on it."}}
{"actor":{"display_login":"wffranco"}}