vue-component | 易学教程

Vue.js: Import class with function and call it in child component

阅读更多关于 Vue.js: Import class with function and call it in child component

问题 I have a component my-parent . In this component, I use a child component my-child and import an external class MyClass with an own function exportedFunction . I tried to use this solution: VueJS accessing externaly imported method in vue component Basiclly, I use mounted and the name of the function from the imported class. In methods I defined a new method, which calls the mounted one from the imported class. Than I pass the created method as property to my child, where I try to call the

How to update a slot in Vue.JS

阅读更多关于 How to update a slot in Vue.JS

问题 I have a Vue component simplified below. Here is the template <template> <slot></slot> </template> The slot may contain HTML, which is why I decided to use a slot rather than a prop which I would simply bind to. I'd like to keep it that way. I have a method that gets new HTML from the server. I'd like to use this new HTML to update the slot. I'm not sure if slots are reactive and how I can accomplish this. I can view the default slot using this.$slots.default[0] , but I don't know how to

VueJS Read Dom Attributes

阅读更多关于 VueJS Read Dom Attributes

问题 I want to get the href attribute to the button click event. <a v-on:click.prevent="func($event)" href="/user/all/2"> <i class="fa fa-edit"></i> <span>Get Data</span> </a> Main.JS Files new Vue({ el: 'body', methods: { func: function (event) { element = event.target; console.log(element); // Output : Select span|i|a element href = element.getAttribute('href'); }, } }); Target event does not select a element. It selects the clicked element. 回答1: You want event.currentTarget , not event.target .

RouterLink attrs is readonly

阅读更多关于 RouterLink attrs is readonly

问题 I'm starting with VueRouter in Vue.js and I'm getting this errors: [Vue warn]: $attrs is readonly. found in ---> <RouterLink> <SecondNav> at resources\assets\js\modules\livegame\player\SecondNav.vue <Player> at resources\assets\js\modules\livegame\player\Player.vue <Root> [Vue warn]: $listeners is readonly. found in ---> <RouterLink> <SecondNav> at resources\assets\js\modules\livegame\player\SecondNav.vue <Player> at resources\assets\js\modules\livegame\player\Player.vue <Root> I have reduced

Emit event from content in slot to parent

阅读更多关于 Emit event from content in slot to parent

问题 I'm trying to build a flexible carousel control that allows inner content elements to force changing a slide, aswell as the carousel controls itself to change slides A sample structure in my page looks like <my-carousel> <div class="slide"> <button @click="$emit('next')">Next</button> </div> <div class="slide"> <button @click="$emit('close')">Close</button> </div> </my-carousel> The template for my carousel is like <div class="carousel"> <div class="slides" ref="slides"> <slot></slot> </div>

Multiple modal components with Vue

阅读更多关于 Multiple modal components with Vue

问题 I am having trouble implementing dynamic modal component in Vue. A common approach I follow to display a set of data fetched from the db is I dump each of the rows in an HTML table element by iterating over each of the row of the db result. Something like this: As you can see in the screenshot, each of the rows has one or more buttons which are dynamically generated by the loop. In order to bind a modal component to each of the buttons (say the Remove buttons in this scenario) I do something

vue.js vue-chartjs chart not updating when chartData replaced, updated etc

阅读更多关于 vue.js vue-chartjs chart not updating when chartData replaced, updated etc

问题 I am attempting to make a vue with vue-chartjs. I have followed all the associated documentation with regards to re-rendering the chart when the chartData prop is updated. My chart will only update after i resize the browser window. my parenttestchart.vue file: <template> <div> <h1>Chart datacollection update test</h1> <p>This component demonstrates fetching data from the server.</p> <p v-if="!datacollection"><em>Loading...</em></p> <b-form-select v-model="testthingSelect.selected" text=

Including external script in vue.js template

阅读更多关于 Including external script in vue.js template

问题 I'm new to Vue.js and web-pack, so I decided to use the vue-cli (webpack) to scaffold an initial application. I'm trying to include an external script (e.g <script src="..." ) in a template which isn't needed globally (for every page/component), however Vue warns that this isn't allowed. My index.html file is similar to the initial generated one: <html lang="en"> <head> <title>App</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width,

Including external script in vue.js template

阅读更多关于 Including external script in vue.js template

Async Computed in Components - VueJS?

阅读更多关于 Async Computed in Components - VueJS?

问题 Im finding a solution to async computed method in Components: Currently, my components is: <div class="msg_content"> {{messages}} </div> <script> export default { computed: { messages: { get () { return api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }}) .then(response => response.data) } } }, } </script> Result: {} How to rewrite it in Promise mode? Because I think we can async computed by writing into Promise mode. 回答1: Computed properties are