vue-component

Is it possible to pass a component as props and use it in a child Component in Vue?

由 ╄→гoц情女王★ 提交于 2019-11-27 10:46:55
问题 In a Vue 2.0 app, let's say we have components A, B and C. A declares, registers and uses B Is it possible to pass C from A to B? Something like this: <template> <div class="A"> <B :child_component="C" /> </div> </template> And use C in B somehow. <template> <div class="B"> <C>Something else</C> </div> </template> The motivation: I want to create a generic component B that is used in A but receives from A its child C . Actually A will use B several times passing different 'C's to it. If this

VueJs get url query

由 丶灬走出姿态 提交于 2019-11-27 10:42:40
问题 I'm developing a website with vuejs and at this moment I'm in a trouble, I need get the url query (page) from a url like this websitename.com/user/?page=1 but the this.$router.query.page get me a error (Uncaught TypeError: Cannot read property 'page' of undefined) someone know something about this problem and can help me? PS: I can set the query page using this.$router.push({name: 'userIndex', query: { page: '123' } }); and I can get the url normal params like the userID -> (websitename.com

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

由 落爺英雄遲暮 提交于 2019-11-27 10:20:58
问题 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? 回答1: 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=

How can I display modal in modal on vue component?

由 白昼怎懂夜的黑 提交于 2019-11-27 08:59:09
问题 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"> <!-- modal content data --> <div class="modal-content modal-content-data"> <form id="form"> <div class="modal

How can I solve “Uncaught TypeError: Cannot read property 'get' of undefined” in the vuex store?

由 非 Y 不嫁゛ 提交于 2019-11-27 08:25:01
问题 If I try this .$session.get(SessionKeys.Cart) in my component like this : <template> ... </template> <script> ... export default { ... methods: { add(item) { console.log(this.$session.get(SessionKeys.Cart) ... } } } </script> It works. I success get session cart But if I try it in the my vuex store like this : import { set } from 'vue' // initial state const state = { list: {} } // getters const getters = { list: state => state.list } // actions const actions = { addToCart ({ dispatch,commit

How can I add link in the card deck groups?

由 核能气质少年 提交于 2019-11-27 08:08:00
问题 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

Render closing tag conditionally in order to emulate calendar behavior

由 雨燕双飞 提交于 2019-11-27 07:22:34
问题 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

Vue v-on:click does not work on component

由 非 Y 不嫁゛ 提交于 2019-11-27 06:35:00
I'm trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a 'test clicked' in the console. I don't see any errors in the console, so I don't know what am I doing wrong. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> App.vue <template> <div id="app"> <test v-on:click="testFunction"></test> </div> </template> <script> import Test from './components/Test' export default {

Vue.js - How to properly watch for nested data

由 孤街醉人 提交于 2019-11-27 05:49:45
I'm trying to understand how to properly watch for some prop variation. I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component through a v-for directive, below a simplification of my implementation: <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ... then inside <script> tag: data(){ return { players: {} }, created(){ let self = this; this.$http.get('../serv/config/player.php').then((response) => { let pls = response

Is there any way to 'watch' for localstorage in Vuejs?

由 淺唱寂寞╮ 提交于 2019-11-27 03:12:47
问题 I'm attempting to watch for localstorage: Template: <p>token - {{token}}</p> Script: computed: { token() { return localStorage.getItem('token'); } } But it doesn't change, when token changes. Only after refreshing the page. Is there a way to solve this without using Vuex or state management? 回答1: Sure thing! The best practice in my opinion is to use the getter / setter syntax to wrap the localstorage in. Here is a working example: HTML: <div id="app"> {{token}} <button @click="token++"> + <
订阅 vue-component