Vue.js

问题 I'm working with nuxt and i have a header layout for my nav. This nav has a background color of white. On a special page, i want to make the nav background color transparent. (Only for this page) I've tried those: This will make the background transparent to all pages.(I don't want that) <style lang="css"> nav { background-color: rgba(0, 0, 0, 0); } This won't work cause my nav it's not in this page, it's included from nuxt layout. <style lang="css" scoped> nav { background-color: rgba(0, 0,

问题 I have this following vuejs component hierarchy. What i want to do it to invoke COMP_B_ONE validate() method, when COMP_A_TWO submit() method is invoked EVERY TIME. MAIN_COMPONENT COMP_A_ONE COMP_B_ONE validate() COMP_B_TWO validate() COMP_A_TWO submit() I've already implemented an emit when submit is triggered in COMP_A_TWO which can be listened in MAIN_COMPONENT submit() { this.$emit('submit') } what seems to be the best approach in this regard? any suggestions appreciated. 回答1: I can get

问题 I have setup a Vuex store and router in Vue. Depending on a piece of state within this store, I would like the router to render a different component for the same path. Below is my attempt at doing this. Within my router, I include a conditional that is saying "if the user is logged in, return Home , otherwise return Login ". Within my Login component, I change the value of my loggedIn state (within the Vuex store) to true when the user successfully logs in. I have tested and can see this

问题 I have a Vue component that works just fine. Now I'm trying to convert that code to ReactJS equivalent. My attempt on React var ticksArray = Array.apply(null, {length: 27}).map(Number.call, Number); export default class Timer extends Component { constructor(props) { super(props); this.state = { angle:250, minangle:0, maxangle:270, xDirection:"", yDirection:"", oldX:0, dragging: false } } onMousedown(){ this.setState({dragging : true}); } onMouseup(){ this.setState({dragging : false}); }

问题 I'm looping root component, which have with child component. <root-select v-for="offer in offers" > <child-options v-for="item in options" > </child-options> </root-select> But, when I $emit root function from child, all my roots component changed those data. child: EventBus.$emit('toggle', value); root: EventBus.$on('toggle', this.toggle); But I need, that data changes only in triggered component. Thanks. 回答1: Try not to use Event bus to emit. Use normal Emit way to emit from child to parent

问题 I am trying to get the response data from my REST API and to display it in my vue.js application as follows: var database = new Vue({ el: '#database', data: { databaseConfiguration: { type: '', url: '', port: '', username: '', password: '' }, errors: [] }, created: function () { axios.get('/config/database') .then(function (response) { this.databaseConfiguration = response.data; console.log(response.data); }) .catch(function (error) { this.errors.push(error); console.log(error); }) } } ) If I

问题 I just updated some of my packages in my package.json due to vulnerabilities. All vulnerabilities were fixed but the following error appeared when I did npm run. Copy Plugin package got updated during my vulnerability fix. I tried copying package.json from older commits and reinstalling all packages, but then the vulnerability appears again. ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema. - options[0] misses

问题 I would like to add style to HTML code in a v-html . I tried several solutions but nothing functional :( Here is my code: Template : <div class="para" v-html="value" /> Script : export default { data () { return { value : "<h2> TITLE </h2> <p> PARA </p>" } }, } Style : .para >>> h2 { color: blue; } .para >>> p { color: red; } Thanks in advance ! 回答1: If you're using scoped style without SASS, use the >>> combinator this way: >>> .para > h2 { color: blue; } >>> .para > p { color: red; } If you

问题 How do I change the up and down arrow icon at a click? I want to click to activate up or down class. <div class="base-box base-box__accordion-sec" @click="arrowToggle()"> <i class="arrow down"> </i> </div> isToggled: false arrowToggle(event) { this.isToggled = !this.isToggled; } .down { transform: rotate(45deg); } .up { transform: rotate(-135deg); } 回答1: <i v-bind:class="{ 'down': isToggled, 'up': !isToggled }" class="arrow"> </i> https://vuejs.org/v2/guide/class-and-style.html 回答2: <template

问题 How do I change the up and down arrow icon at a click? I want to click to activate up or down class. <div class="base-box base-box__accordion-sec" @click="arrowToggle()"> <i class="arrow down"> </i> </div> isToggled: false arrowToggle(event) { this.isToggled = !this.isToggled; } .down { transform: rotate(45deg); } .up { transform: rotate(-135deg); } 回答1: <i v-bind:class="{ 'down': isToggled, 'up': !isToggled }" class="arrow"> </i> https://vuejs.org/v2/guide/class-and-style.html 回答2: <template