vue-component

问题 I'm new to vuejs I want to pass an JSON object to another component within same vue instance. following show the my code. from component add-user to component view-user. I tried vue props but it didn't work Thank you very much. Vue.component('view-users',{ props:['user'], template: '<span>{{ user.name }}</span>' }); Vue.component('add-user',{ data: function(){ return { user:{ name:'jhon', age:'29', } } } }); var app = new Vue({ el:'#app', }); <script src="https://cdnjs.cloudflare.com/ajax

问题 So I have some code that has a b-form-input component and I am testing whether that component renders. I am using wrapper.find({name: "b-form-input"}).exists() to determine whether that bootstrap vue component exists. However this function continually returns false when I know that the component is rendering. Could I have some help on how to do this correctly? 回答1: Looking at the bootstrap-vue source code, it looks like the name of the element is BFormInput and not b-form-input (it was

问题 <template> <div> <transition name="fade" mode="out-in"> <div class="ui active inline loader" v-if="loading" key="loading"></div> <div v-else key="loaded"> <span class="foo" ref="foo">the content I'm after is here</span> </div> </transition> </div> </template> <script> export default { data() { return { loaded: false } }, mounted() { setTimeout(() => { // simulate async operation this.loaded = true console.log($(this.$refs.foo).length, $(this.$el.find('.foo')).length) }, 2000) }, } </script>

问题 <template> <div> <transition name="fade" mode="out-in"> <div class="ui active inline loader" v-if="loading" key="loading"></div> <div v-else key="loaded"> <span class="foo" ref="foo">the content I'm after is here</span> </div> </transition> </div> </template> <script> export default { data() { return { loaded: false } }, mounted() { setTimeout(() => { // simulate async operation this.loaded = true console.log($(this.$refs.foo).length, $(this.$el.find('.foo')).length) }, 2000) }, } </script>

问题 When I put this in my Vue component ... // using store getter computed: { authenticated() { return this.$store.getters.authenticated } } ... it works. The value for authenticated is reactive and the computed property returns true when the value in the vuex store is true . This should work ... (and would be the right way according to the docs) // using store state computed: { authenticated() { return this.$store.state.authenticated } } ... but doesn't. The computed property is always false .

问题 When I put this in my Vue component ... // using store getter computed: { authenticated() { return this.$store.getters.authenticated } } ... it works. The value for authenticated is reactive and the computed property returns true when the value in the vuex store is true . This should work ... (and would be the right way according to the docs) // using store state computed: { authenticated() { return this.$store.state.authenticated } } ... but doesn't. The computed property is always false .

问题 I'm working with vue component (cli .vue) I need to have my stylesheet appear only if certain boolean is true/false. Simplest explanation would be something like : When myVar==false , component is not loading styles. <style v-if="myVar" lang="scss"> @import 'mystyles.css' </style> I know it is impossible in that way, but how I'm able to do 'similar' thing? I need to load my styles in vue if user want to use default Styles, if not I need to prevent them from being loaded. My component is used

问题 I'm working with vue component (cli .vue) I need to have my stylesheet appear only if certain boolean is true/false. Simplest explanation would be something like : When myVar==false , component is not loading styles. <style v-if="myVar" lang="scss"> @import 'mystyles.css' </style> I know it is impossible in that way, but how I'm able to do 'similar' thing? I need to load my styles in vue if user want to use default Styles, if not I need to prevent them from being loaded. My component is used

问题 Here is a VueJS component: <template> <a @click="log">click me<a> </template> <script> export default { data() { return { a: "a", b: "something", foo: { bar: "baz" }, // etc. } }, methods: { log() { // console.log( data ); // ??? } } } </script> I want to access the data from the log function and get it as an object (just like in its declaration). I know I can get data like this : log() { console.log( this.a ); console.log( this.b ); console.log( this.foo ); } But what I want is the whole

问题 I am building a blog with VueJS 2. Most of my articles are stored as Markdown files, but I want to me able to cover some more advanced topics, using features that Markdown doesn't cover. I am considering making these special posts VueJS components that would be used in a template as <article-name> , or <special-article article-title="{{articleTitle}}"> . Pretty simple. I have the component loaded already, so all I need to do is compile the template string into a real template. I might be