Vue.js | 易学教程

Vue modal component using in parent component

阅读更多关于 Vue modal component using in parent component

问题 I'm building simple modal component with Vue. I want to use this component in a parent components and to be able to toggle it from the parent. This is my code now of the modal component: <script> export default { name: 'Modal', data() { return { modalOpen: true, } }, methods: { modalToggle() { this.modalOpen = !this.modalOpen }, }, } </script> <template> <div v-if="modalOpen" class="modal"> <div class="body"> body </div> <div class="btn_cancel" @click="modalToggle"> <i class="icon icon-cancel

How can I use transition on individual list elements in Vue.js?

阅读更多关于 How can I use transition on individual list elements in Vue.js?

问题 My understanding of transitions in vue.js is that you use <transition> to animate between individual elements and <transition-group> to animate a whole list. It seems as though if you wanted to animate a transition within a list item you'd use <transition> within the list. e.g. something like this: <span v-for="item in items"> <transition> <div> Transition from this... </div> <div> ...to this. </div> </transition> </span> Yet, when I make that change the animation doesn't work. Is this an

Vue modal component using in parent component

阅读更多关于 Vue modal component using in parent component

VueJS = Uncaught TypeError: Cannot read property 'settings' of undefined

阅读更多关于 VueJS = Uncaught TypeError: Cannot read property 'settings' of undefined

问题 I have a basic input that should update a data on input change, but it doesn't because it returns Uncaught TypeError: Cannot read property 'settings' of undefined Vue component <template> <div> <div class="inner_container"> <p> URL: <span>{{settings.url}}</span> </p> <div class="input_row"> <input class="input_text" id="getURL" type="url" inputmode="url" placeholder="Enter URL" title="URL" @input="changeUrl" /> <label class="label_" for="getURL">URL Link</label> </div> <button class="button"

Vue Elementui 使用sortablejs实现表格拖拽

阅读更多关于 Vue Elementui 使用sortablejs实现表格拖拽

Sortable.js是一款轻量级的拖放排序列表的js插件安装 Sortable.js npm install sortablejs --save 引入表格拖拽依赖 import Sortable from 'sortablejs' 给el-table添加属性 row-key="id" 添加行拖拽方法 //行拖拽 rowDrop() { //获取当前表格 const tbody = document.querySelector('.el-table__body-wrapper tbody') const that = this //newIndex -- 新下标 oldIndex -- 旧下标 Sortable.create(tbody, { onEnd({ newIndex, oldIndex }) { //移除原来的数据 const currRow = that.tableData.splice(oldIndex, 1)[0] //移除原来的数据并插入新的数据 that.tableData.splice(newIndex, 0, currRow) } }) } 添加mounted mounted() { this.rowDrop() } 来源： oschina 链接： https://my.oschina.net/u/173975/blog/4929298

In Vue, v-binding is not working on the “checked” property for Bootstrap Toggle Checkboxes?

阅读更多关于 In Vue, v-binding is not working on the “checked” property for Bootstrap Toggle Checkboxes?

问题 <input type="checkbox" data-toggle="toggle" id="id2" :checked="foo.bar"> The line of code above should check the input when foo.bar (which is a boolean) is 1 and uncheck the box when foo.bar is 0, but it never checks the box when the value is 1. When I remove the data-toggle="toggle" from the previous line of code, it works perfectly, but that makes the display show as a boring checkbox instead of a neat bootstrap toggle, so that isn't a possible workaround for me. I'm using the most recent

Using a javascript library/plugin within Vue code

阅读更多关于 Using a javascript library/plugin within Vue code

问题 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

Question about parent/child relationships and components

阅读更多关于 Question about parent/child relationships and components

问题 I'm currently trying to port a project from vuex/REST to vue-apollo. The project shows a list of events, and each event can be expanded to show details, including attendees. So I'm having an EventList component, that fetches the events and all attributes necessary for the list. And I have a EventDetails child component that is expanded from the list onclick. EventDetails requires some event data as well as the list of attendees to render. Problem is, I cannot find an elegant way to build the

bootstrap-vue: most Icons isnt showing

阅读更多关于 bootstrap-vue: most Icons isnt showing

问题 I import all icons (as documentation says): import Vue from 'vue' import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' Vue.use(BootstrapVue) Vue.use(BootstrapVueIcons) When I copy some code from site - icon is working great. This example is ok: <b-icon icon="exclamation-circle-fill" variant="info"></b-icon> But when Im just changing the icon name, it disappears... It looks like some icons does not exist... This doesnt work: <b-icon icon="cart" variant="info"></b-icon> How to fix it

Deep filter objects in javascript array

阅读更多关于 Deep filter objects in javascript array

问题 From the following code below I need to return only the objects that have meta.menu in them while preserving the structure. So in the case below, only the object with "panel.users.view" would get removed. I've tried making a recursive function to traverse it but I can't figure out how to infinitely traverse it because there could be more objects. I don't know how many levels deep a routes object can get. I've also looked through lodash and collect.js to see if there were functions that could