vue-component

Vue inline template not finding methods or data

杀马特。学长 韩版系。学妹 提交于 2019-12-20 02:56:29
问题 Normally using Vue as an out of the box solution with Laravel so it just 'works'. I am adding it now to a WordPress build but have an issue with an inline template. Every looks fine, but it will not do anything in the mounted method and says that any data or methods are undefined, almost likes its not properly loading the component. Here is the basic HTML: <tabbed-panels class="component tabPanels" inline-template> <div> <div class="tabPanels__controls-control" v-on:click="changeTab(1)"></div

How to destroy a VueJS component that is being cached by <keep-alive>

与世无争的帅哥 提交于 2019-12-19 10:29:26
问题 I have a Vue component that's kept alive using Vue's element for caching purposes. However, the problem I am having right now is that once I sign out of one account and create a new account on my Vue application, the component I'm "keeping alive" is being reflected for the new user (which obviously isn't relevant for the new user). As a result, I want to destroy that component once the user signs out. What is the best way to go about this? 回答1: I've managed to solve my issue in the following

Emitting global events from websocket listener

痞子三分冷 提交于 2019-12-19 08:05:53
问题 I want to contribute to a project - it's written in Vue, and I am a beginner in Vue. I have two components - Setup and MainApp Both will need to update some state based on different messages from the websocket. Some websocket messages will affect the former, some the latter. Vue doesn't know services, so I thought I'd just create a custom component, with empty <template> . instantiate the websocket there and then issue an this.emit() every time a new message occurs in the listener. Both other

Vuejs can't access refs from component

混江龙づ霸主 提交于 2019-12-19 05:01:49
问题 I am trying to get the canvas element which is inside a template of a component, found great documentations for vuejs1 but not for vuejs2 where "ref" is the only way to get the element. I am getting the object though, but when I try to access the variable it is undefined. My html <div id="app> <template id="image-capture"> <div class="row" > <canvas ref="icanvas" ></canvas> </div> </template> </div> My js const ic = { template: '#image-capture' , created () { console.log(this.$refs); //this

Vue: Reasons to use props instead of referencing parent data?

我们两清 提交于 2019-12-19 04:46:21
问题 In VueJS, I have seen different ways of accessing parent properties from a component. Say I want to use the parent property items in my component. First way The component has a props value bound to a parent property: .js Vue.component("example", { template: "<div></div>", props: ["myItems"] }); .html <example v-bind:my-items="items"></example> Second Way The child component accesses a parent's properties directly, like this: this.$parent.items Question Is there a reason to use the more

How to add a loading icon while searching? (Vue.js 2)

落花浮王杯 提交于 2019-12-19 04:11:34
问题 My component is like this : <template> ... <input type="text" class="form-control" v-model="rawFilter" placeholder="Search" @keyup="getPlayers"> ... </template> <script> import _ from 'lodash' ... export default { ... data() { return{ msg:'hello vue', rawFilter:'', loading:false } }, ... methods: { getPlayers: _.debounce(function(e) { const text = e.target.value.trim() this.$store.dispatch('getPlayers', { q: text }) },1000), ... } } </script> When I searching, before display the data, I want

How to add a loading icon while searching? (Vue.js 2)

北战南征 提交于 2019-12-19 04:10:04
问题 My component is like this : <template> ... <input type="text" class="form-control" v-model="rawFilter" placeholder="Search" @keyup="getPlayers"> ... </template> <script> import _ from 'lodash' ... export default { ... data() { return{ msg:'hello vue', rawFilter:'', loading:false } }, ... methods: { getPlayers: _.debounce(function(e) { const text = e.target.value.trim() this.$store.dispatch('getPlayers', { q: text }) },1000), ... } } </script> When I searching, before display the data, I want

POST file along with form data Vue + axios

自闭症网瘾萝莉.ら 提交于 2019-12-19 03:09:33
问题 I have a method for Vuejs component: async submit () { if (this.$refs.form.validate()) { let formData = new FormData() formData.append('userImage', this.avatarFile, this.avatarFile.name) this.avatarFile = formData try { let response = await this.$axios.post('http://localhost:3003/api/test.php', { avatar: this.avatarFile, name: this.name, gender: this.gender, dob: this.DOB, }, { headers: { 'Content-Type': 'multipart/form-data; boundary=' + formData._boundary } }) if (response.status === 200 &&

vue wrap another component, passing props and events

戏子无情 提交于 2019-12-18 16:30:18
问题 How can I write my component to wrap another vue component, while my wrapper component get some extra props? My wrapper template component should be: <wrapper-component> <v-table></v-table> <!-- pass to v-table all the props beside prop1 and prop2 --> </wrapper-component> and the wrapper props: props: { prop1: String, prop2: String } Here I want to wrap a table component, and pass to the table component all the props and events that were passed to the wrapper, beside two extra props prop1 and

How to re-mount a component?

谁说我不能喝 提交于 2019-12-18 11:09:22
问题 I have a component which is mounted as part of the DOM rendering. The skeleton of the application is <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <div id="app"> <my-component></my-component> <button>press this button to reload the component</button> </div> </body> </html> <my-component> is functional (it displays a few form inputs) and $emit data to the parent. Is there a way to re-mount it? The goal is to have a component content and setup as if it