vue-component

问题 I have strings that contains ### and I am replacing with array values. Now I want to use them with a component, I created the component and it works but I don't know how to use it in the strings. I don't want to wrap them manually because I don't know how the strings will be, it can have several ### . If it has 2 ### , options will have 2 subArrays. What is the better way to do it? Code: https://jsfiddle.net/tsobh4nu/ Vue.component('opt', { template: `<label> <span class="bold" v-for="(str

问题 I have a parent component that contains an array and an object: data() { return { products: [], attributes: {}, } }, When my parent component is loaded, it gets some AJAX data and populates the variables: mounted() { axios.get('/requests/getProducts/' + this.currentCategory).then(response => { this.products = response.data; this.createAttributes(); // runs some methods to populate the attributes object }); }, I then have a child component that I will use to display the attributes. Code from

问题 I am relatively new to Vue, but well-versed in Typescript and Angular. I am currently going the typescript route, using the vue-class-component and vue-property-decorator libraries as prescribed by the vue docs. I use VSCode as my editor, and, as per the title, was wondering if there are any tools/plugins/IDEs out there which allow auto-complete/intellisense in the html template. Say for example my .ts file is: hi.ts: import { Component, Vue, Prop } from 'vue-property-decorator'; interface

问题 I'm sure there is a simple way to do this, but I can't figure it out. In my html file I have the following button: <button @click="showModal">Show Modal</button> Clicking that button runs the following method: new Vue({ el: '#root', methods: { showModal() { Event.$emit('showModal'); }, } }); What I want to happen when I click on that button is to toggle a class in a modal component. Here is the relevant code for the component: Vue.component('modal', { template: ` <div :class="[ modalClass, {

问题 I'm using Laravel and Vue to create an app which has a master layout.blade file and then I'm using component and the VueRouter. What I can't get my head around is how to achieve the following. Lets say I have two routes 'Home' and 'About' which call a dedicated home.vue and about.vue component files. What if, outside of the component I have a H1 for the heading of the page contained in the master page. How would I go about updating that? Do I do it in route.js or the component file? 回答1: The

问题 I am using vue js browerify and i have installed jquery i am using jquery as import $ from 'jquery and it works. To import anyother dependency like semantic.js or jquery.ui is it throwing errors. I have read and tried all the related posts on stackoverflow. when i do import $ from 'jquery import 'jquery-ui it says jQuery in not defined. i have tried the extend method. it still does not work. I also have tried to include the files on my index.html usng the <Script src> tag . and it says $ not

问题 so i have this setup, i have my component called dataviewer.vue that use to show table <template> <table class="table"> <thead class="bg-primary"> <tr> <th v-for="item in thead"> <span>{{item.title}}</span> </th> </tr> </thead> <tbody> <slot v-for="item in model.data" :item="item"></slot> </tbody> </table> </template> <script> import Vue from 'vue' import axios from 'axios' export default { props: ['source', 'thead'], data() { return { model: { data: [] }, } }, beforeMount() { this.fetchData(

问题 My first component (child component) like this : <template> ... </template> <script> export default { ... methods: { addPhoto() { const data = { id_product: this.idProduct} const item = this.idImage this.$store.dispatch('addImage', data) .then((response) => { this.$parent.$options.methods.createImage(item, response) }); }, } } </script> If the method addPhoto called, it will call ajax and then it will get response ajax I want to send response ajax and another parameter to method createImage.

问题 i am using the dragable and sortable with vuejs, and i have a issue, everytime i change the position of two divs for example, they change but the json array doesn't update. I am working with vuex, and i have in my component template this html: <draggable v-model="myList"> <div class="panel panel-primary" v-for="(value, key, index) in this.$store.getters.getDocumentAttributes"> <div class="panel-body quote"> <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove

问题 I am trying to learn Vue 2 framework and I am stuck with this error. I have the following scripts responsible for the functionality of my application: main.js import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import App from './App.vue' import Posts from './components/Posts.vue' import Routes from './routes/routes' Vue.config.productionTip = false Vue.use(VueRouter) Vue.use(VueResource) const router = new VueRouter({ routes: Routes }) new Vue({ el