vue-component

问题 So, I am trying to use the pretty neat component vue-social-sharing but this is the first time I am using such a libaray and am not sure how to set it up properly. I have installed it via NPM, but then get lost on the first section "Usage, Loading the library" Specifically, it says "Browserify / Webpack" var SocialSharing = require('vue-social-sharing'); Vue.use(SocialSharing); But, I am not exactly sure where that goes, how it is setup etc. Do I set it in some Webpack file somewhere? or

问题 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 a single file component like this: <template> <div> <template v-if="offers.length > 3"> <a href="#">View all offers here</a> </template> <template v-else-if="offers.length > 1"> <offer v-for="offer in offers" :data="offer"></offer> </template> <template v-else-if="offers.length == 1"> <offer :title="The offer" :data="offers[0]"></offer> </template> </div> </template> Based on the number of offers , I choose how many to render. Question: How do I efficiently get/count the number of

问题 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 push data from a v-text-field onto a json file. When i tried it on Postman it worked so I'm guessing the error is coming from the client side product.vue <v-container> <v-row> <v-col> <v-text-field label="440" v-model="onetext" ></v-text-field> <v-text-field label="Card Type" v-model="twotext" ></v-text-field> <v-text-field label="Card Type" v-model="threetext" ></v-text-field> <v-text-field label="Card Type" v-model="fourtext" ></v-text-field> <v-text-field label="Card Type" v

问题 What am I trying to do Given a string from a user input, I am attempting to render this string with particular substrings wrapped in a component. In my particular case the substring being matched is a date that matches a regex pattern and the component that is supposed to wrap it is a chip from Vuetify. What I have done Above is a screenshot of what I have achieved so far. The input of the textarea is rendered below it with certain substrings wrapped in the chip component from Vuetify. The

问题 I am trying to replicate the vue tutorial example (found here: https://v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props ), but with no success. Below is my code. I have a view called TA.vue, that i would like to import the component into and render. Any ideas what I am doing wrong? TA.vue (the view): <template id="front"> <b-container style="margin-top: 9rem;"> <b-row> <div id="blog-posts-events-demo" class="demo"> <div> <blog_post v-for="post in posts"

问题 I am trying to replicate the vue tutorial example (found here: https://v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props ), but with no success. Below is my code. I have a view called TA.vue, that i would like to import the component into and render. Any ideas what I am doing wrong? TA.vue (the view): <template id="front"> <b-container style="margin-top: 9rem;"> <b-row> <div id="blog-posts-events-demo" class="demo"> <div> <blog_post v-for="post in posts"

问题 I have an vue app and a global component. Both have a data property. For the component I use the x-template way to keep my html code together. I have encountered a strange error where the data was not available in the component, although the component was rendered properly when I didn't access the data in the component. Here comes the HTML: <h1>Hello</h1> <div id='app'> <p>Here is the app: {{message}}</p> <my-component></my-component> <script type="text/x-template" id="template"> <div> <p

问题 I'm building a banner with Vue that needs to have a dynamic background, however, it doesn't seem to be working. Not sure what I'm doing wrong. I've tried a few other ways and it works if I do an image tag something like <img :src="require(`@/assets/images/${backgroundImage}`)" /> But obviously this needs to be an inline background image. Code: component <template> <div class="w-full h-64 bg-auto bg-no-repeat bg-center lg:bg-cover relative" :style="{ backgroundImage: url(require('@/assets