vue-component | 易学教程

How to use SASS / SCSS with latest vue-cli starter project?

阅读更多关于 How to use SASS / SCSS with latest vue-cli starter project?

I need to use SASS or SCSS in my project. I used the vue-cli to make the latest version of a starter project. Anyone had any success in making sass/scss work in the newest starter project with webpack? Linus Borg you install the necessary dependencies npm install -D node-sass sass-loader for global styles, simply import the file into main.js : import './styles/my-styles.scss' in .vue files, add the lang to the <style> element. <style lang="scss"> If using webstorm: <style lang="scss" rel="stylesheet/scss"> Add this in your package.json in scripts and run "compile:sass": "node-sass 'your main

How do I format currencies in a Vue component?

阅读更多关于 How do I format currencies in a Vue component?

问题 My Vue component is like this : <template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> The result of {{ item.total }} is 26000000 But I want format it to be like this : 26.000.000,00 In jquery or javascript, I can do it But, How to do it in vue component? 回答1:

vue - how to pass down slots inside wrapper component?

阅读更多关于 vue - how to pass down slots inside wrapper component?

问题 So I've created a simple wrapper component with template like: <wrapper> <b-table v-bind="$attrs" v-on="$listeners"></b-table> </wrapper> using $attrs and $listeners to pass down props and events. Works fine, but how can the wrapper proxy the <b-table> named slots to the child? 回答1: Vue 2.6 (v-slot syntax) All ordinary slots will be added to scoped slots, so you only need to do this: <wrapper> <b-table v-bind="$attrs" v-on="$listeners"> <template v-for="(_, slot) of $scopedSlots" v-slot:[slot

How can I display modal in modal on vue component?

阅读更多关于 How can I display modal in modal on vue component?

My view blade like this : <a href="javascript:" class="btn btn-block btn-success" @click="modalShow('modal-data')"> Click here </a> <data-modal id="modal-data"></data-modal> If the button clicked, it will call dataModal component (In the form of modal) dataModal component like this : <template> <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document">  <div class="modal-content modal-content-data"> <form id="form"> <div class="modal-body"> ... </div> ... <button type="submit" class="btn btn-success" @click="add"> Save </button> ... <

How can I add link in the card deck groups?

阅读更多关于 How can I add link in the card deck groups?

I get reference from here : https://bootstrap-vue.js.org/docs/components/card/#card-deck-groups The script like this : <div> <b-card-group deck> <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Img" img-top> <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </p> <div slot="footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </b-card> <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Img" img-top> <p class="card

Render closing tag conditionally in order to emulate calendar behavior

阅读更多关于 Render closing tag conditionally in order to emulate calendar behavior

Can I render closing tag conditionally with v-if ? And if yes, what's the right way to do it? My first instinct was this: <template v-for="day in days"> <td class="days">{{day.number}}</td> <template v-if="day.isSunday"> </tr> <tr> </template> </template> This works on its own, but it wont render </tr><tr> raw - is this expected behavior? And if this is impossible - what is the best way to break a table row conditionally? My specific case is - days of the month in an array with additional info for them. Each day has a isSunday property and I want to start a new row after each Sunday (imitating

How can I send data from parent to child component by vuex store in vue component?

阅读更多关于 How can I send data from parent to child component by vuex store in vue component?

问题 My parent component like this : <template> ... <search-result/> ... </template> <script> import {mapActions} from 'vuex' ... export default { ... props: ['category'], mounted() { this.updateCategory(this.category) }, methods: { ...mapActions(['updateCategory']), } } </script> My child component like this : <template> ... </template> <script> import {mapGetters} from 'vuex' ... export default { ... mounted() { console.log(this.getCategory) }, computed: { ...mapGetters(['getCategory']) }, } <

How to do databind two way in v-html?

阅读更多关于 How to do databind two way in v-html?

问题 I have an element div with atribute contenteditable="true". This div behaves like an element textarea. <div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div> my code: data() { return { msg: '', } }, methods: { enviaMensagem() { console.log(this.msg); } } My problem is that the databind does not work. What is typed in the div does not reflect on the variable. Does anyone know what can it be? 回答1: You need to listen to changes of the element, because v-model only works

How to pass props using slots from parent to child -vuejs

阅读更多关于 How to pass props using slots from parent to child -vuejs

I have a parent component and a child component. The parent component's template uses a slot so that one or more child components can be contained inside the parent. The child component contains a prop called 'signal'. I would like to be able to change data called 'parentVal' in the parent component so that the children's signal prop is updated with the parent's value. This seems like it should be something simple, but I cannot figure out how to do this using slots: Here is a running example below: const MyParent = Vue.component('my-parent', { template: `<div> <h3>Parent's Children:</h3> <slot

Remove repeated elements from v-for in VueJS

阅读更多关于 Remove repeated elements from v-for in VueJS

问题 I'm using the following code to display categories from an array. The array may contain duplicate categories. Is there any way I can only select unique elements in VueJS? <li v-for="product in products"> {{product.category}} </li> Array: products: [ { id: '1', title: 'Test 1', category: 'Test 3' }, { id: '2', title: 'Test 2', category: 'Test 1' }, { id: '3', title: 'Test 3', category: 'Test 2' }, { id: '3', title: 'Test 4', category: 'Test 1' }, { id: '5', title: 'Test 5', category: 'Test 3'