vue-component

问题 Im using the popular plugin for multiselect shentao/vue-multiselect <multiselect v-model="test.selectedTags" :options="options" :multiple="true" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true"> </multiselect> On my code im using axios request to fetch user id and name to be pre-selected by the multi-select editUrl: function(id){ let vm = this; axios.get('api/urls/' + id) .then( response => { vm

问题 My view like this : @foreach($leagues as $league) <a data-toggle="tab" @click="$refs.leagues.changeLeague({{ $league->id }})"> {{ $league->name }} </a> @endforeach ... <div class="tab-pane active"> <top-league class="slick" league-id="{{ $league_id }}" ref="leagues"></top-league> </div> My top league component vue like this : <template> <div class="row"> <div class="col-md-3" v-for="item in items"> <div class="panel panel-default"> <div class="panel-image"> <a :href="baseUrl+'/leagues/'+item

问题 I'm trying to create a Component instance: App.vue import MyComponent from './components/MyCompnent.vue'; export default { mounted() { // The following line fails. const vm = new MyComponent(); vm.$mount('#some-place'); } } and the new line reports an error: Uncaught TypeError: MyComponent.default is not a constructor So how if I want to create the component? 回答1: Finally, I found the solution myself, very simple: The Component imported itself is not a constructor, but we can easily make a

问题 I have parent component vue like this : <template> <form> <div class="row"> <div class="col-md-4"> <form-select id="color" name="color" :data="color">Color</form-select> </div> <div class="col-md-4"> <form-select id="size" name="size" :data="size">Size</form-select> </div> </div> ... <a href="javascript:" class="btn btn-danger" @click="add"> Add </a> </form> </template> <script> import FormSelect from '../form/FormSelect.vue' export default { data(){ return { quantity: [ {id: 1, value: '1'},

问题 We have a component in Vue which is a frame, scaled to the window size, which contains (in a <slot> ) an element (typically <img> or <canvas> ) which it scales to fit the frame and enables pan and zoom on that element. The component needs to react when the element changes. The only way we can see to do it is for the parent to prod the component when that happens, however it would be much nicer if the component could automatically detect when the <slot> element changes and react accordingly.

问题 I have a Vue component where I am trying to get rest api (using axios) data to populate a table. The rest call returns a valid json string in chrome. However, I can't get it to populate the table in the template. When I run the view, I get the following error in the rest call: TypeError: Cannot set property 'courses' of undefined Here is the json being returned: [{"CourseId":"architecture","AuthorId":"cory-house","Title":"Architecting Applications","CourseLength":"4:20","Category":"Software

问题 How I can get access to parent's data variable (limitByNumber) in my child component Post? I tried to use prop but it doesn't work. Parent: import Post from './components/Post.vue'; new Vue ({ el: 'body', components: { Post }, data: { limitByNumber: 4 } }); Component Post: <template> <div class="Post" v-for="post in list | limitBy limitByNumber"> <!-- Blog Post --> .... </div> </template> <!-- script --> <script> export default { props: ['list', 'limitByNumber'], created() { this.list = JSON

问题 I have one single file component that is used to show data and another one that is used to edit the same data. The view has labels and paragraphs where as the edit component has inputs and textareas. Both of these components take the same data object. Is there a way that by editing the fields (bound with v-model in the edit component) the changes a reflected to the view component? For example, here's my paragraph.vue that is used to show the data <template> <div class="row"> <div class="col

问题 I have one single file component that is used to show data and another one that is used to edit the same data. The view has labels and paragraphs where as the edit component has inputs and textareas. Both of these components take the same data object. Is there a way that by editing the fields (bound with v-model in the edit component) the changes a reflected to the view component? For example, here's my paragraph.vue that is used to show the data <template> <div class="row"> <div class="col

问题 Trying to use jquery-chosen with vue, the problem is that this plugin hides the actual select that I applied v-model, so when I select a value vue doesn't recognize it as a select change event and model value is not updated. I've seen some solution available for Vue 1 that don't work with Vue 2 It's showing the current value but doesn't know how to set so that model value changes. http://jsfiddle.net/q21ygz3h/ Vue.directive('chosen', { twoWay: true, // note the two-way binding bind: function