vue-component

问题 I have two component. I set and get data by vuex store My first component like this : <template> <ul class="list-group"> <li v-for="item in getOrderList" class="list-group-item"> .... <a href="javascript:" class="toggle-show" aria-expanded="false" data-toggle="collapse" :data-target="'#' + item.id" @click="showDetailOrder(item.id)"> Show <span class="caret"></span> </a> ... <div class="collapse" :id="item.id"> <template v-if="getOrderDetail.id"> <order-collapse/> </template> </div> </li> </ul

问题 In my Laravel+Vue.js SPA ( Single Page Application) I am using the datepicker package from here, BootstrapVue from here and Veevalidate from here . I think I need to show only the code inside my component file as only the datepicker component causes the problem and not other ones. My code follows in EditProfile.vue : <ValidationObserver ref="form" v-slot="{ passes }"> <div id="registration_form"> <b-form @submit.prevent="passes(onSubmit)" @reset="resetForm"> <ValidationProvider vid="name"

问题 In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property but nothing changed. Then I realized that I've got a special case: <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> I am passing myProp that the parent component receives to the child component. Then the watch: {myProp: ...} is not

问题 My case like this : If I search a data, it will show all data doctor. But for available day, I want to make it separately. when finished displaying all the doctor's data. I want to call the available method for async or call api to display available day. This available day is run when doctor data appears on the screen. So when the doctor's data appears on the screen, it will call available day. If the user scrolls down, it will call available day from another doctor My code like this : <v-col

问题 My case like this : If I search a data, it will show all data doctor. But for available day, I want to make it separately. when finished displaying all the doctor's data. I want to call the available method for async or call api to display available day. This available day is run when doctor data appears on the screen. So when the doctor's data appears on the screen, it will call available day. If the user scrolls down, it will call available day from another doctor My code like this : <v-col

问题 I'm immigrating my code to Vue.js so pretty new to Vue. As you see the screenshot(link below), There are 4 columns inside div with columns class name. I was trying to use v-if to add the div(class columns ) conditionally but I have no idea how to get a length of columns elements in Vue. Example Code <template lang="pug"> .container .columns(v-if="") // add this conditionally .column.is-3.vid(v-for='item in items') .panel p.is-marginless a(href=item.videoId) img(src=item.thumbnail) .panel

问题 I'm immigrating my code to Vue.js so pretty new to Vue. As you see the screenshot(link below), There are 4 columns inside div with columns class name. I was trying to use v-if to add the div(class columns ) conditionally but I have no idea how to get a length of columns elements in Vue. Example Code <template lang="pug"> .container .columns(v-if="") // add this conditionally .column.is-3.vid(v-for='item in items') .panel p.is-marginless a(href=item.videoId) img(src=item.thumbnail) .panel

问题 I am new in Vuejs so I am sure is my code. I have this simple app.vue file and I want to get the data from JSON and then setup my menu based on the data. I do a simple test: export default { name: 'app', data:function(){ return{ menu:[] } }, methods:{ GetMenu:function(s){ $.get({ url: 'static/json/menu.json', success:function(res) { s = res.menu; console.log(s[0].artist);//<-- have result } }) } }, created:function(){ this.GetMenu(this.menu); console.log(this.menu);//<-- have [__ob__:Observer

问题 i am using laravel 5.4 and vue 2.0. I need to insert comments of parent posts like facebook. I want to pass 'post id' from parent to child template to insert comments of that parent post. <div class="post-section" v-for="(post,index) in posts"> <div class="media-content" v-text='post.body'></div> <button @click="getComments(post, index)" class="btn btn-link">Comments</button> <div v-if='show' class="card comment" v-for='comment in post.comments'> <span>  {{comment.comment}}</span> </div>

问题 I am passing an array to a component in Vue.js but it is not passing properly. Strings pass fine. My code is below: Vue code <template> <div class="panel panel-default"> <div class="panel-heading">{{c}}</div> <div class="panel-body"> </div> </div> </template> <script> import axios from 'axios'; export default { mounted() { console.log('Component ready.'); }, props: ['f','c'], data : function() { return { } }, And the HTML/PHP <div class="container"> <div class="row"> <div class="col-md-12"> <