I have the following .html file in my local Vue.js project (it's a simplified version):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<main>
<div id="myElement">
<div v-for="(properties, name) in list" v-bind:key="name">{{ name }}</div>
</div>
</main>
<script type="module">
import SomeClass from "./SomeClass.js";
const myClass = new SomeClass();
let app = new Vue({
el: "#myElement",
data: {
list: myClass.object
},
});
</script>
</body>
</html>
Inside the <script type="module"> tag I import SomeClass which includes a property called object:
export default class SomeClass {
constructor() {
this.object = {
name1: { ... },
name2: { ... },
...
};
}
}
The issue here is that Vue.js reacts to changes in object (if I check it using watch) but it does not update my HTML:
<div v-for"..." v-bind:key="...">...</div>.
What can I do to make Vue.js update my HTML when new properties added to object / old properties updated?
Vue has a method to add properties to items in the data attribute (so they keep reactivity). (More on this: https://v2.vuejs.org/v2/api/#Vue-set)
The snippet below may help you to see the method in action:
class SomeClass {
constructor() {
this.object = {
name1: {
name: 'name3'
},
name2: {
name: 'name4'
}
}
}
}
const myClass = new SomeClass()
new Vue({
el: "#app",
computed: {
// transforming array for reactive display
transformedObj() {
const ret = []
this.keyVal().forEach(e => {
e.forEach(el => {
ret.push(el)
})
})
return ret
}
},
data: {
object: myClass.object
},
methods: {
// transforming object for better display
keyVal() {
return Object.keys(this.object).map(e => {
return Object.entries(this.object[e]).map(([k, v]) => {
return `${k}: ${v}`
})
})
}
},
mounted() {
// add new property (reactive)
Vue.set(this.object.name1, 'newProperty', '2')
// or add new property (reactive)
this.$set(this.object.name2, 'localNewProperty', 45)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item, key) in transformedObj">{{item}}</li>
</ul>
Object: {{transformedObj}}
</div>
Related
I've been trying to get this loop to work, but I keep getting the error
card is undefined
How can I put the img property of the card object into the template?
function Board() {
this.cards = [new Card()];
}
function Card() {
this.img = 'img.png';
}
Vue.component('card', {
props: ['card'],
template: '<img v-bind:src="card.img">'
});
let app = new Vue({
el: '#app',
data: {
board: new Board()
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<card v-for="card in board.cards" v-bind:key="card.img">
</div>
I don't do Vue.js, but what jumped out at me was that you've said your card component takes a card property, but you're giving it a key property instead. The other thing that jumped out was trying to get card.img in two places (the template, and the markup).
If you change v-bind:key="card.img" to v-bind:card="card" (or :card="card"), in the markup, it works:
function Board()
{
this.cards = [new Card()];
}
function Card()
{
this.img = 'img.png';
}
Vue.component('card',
{
props:['card'],
template: '<img v-bind:src="card.img">'
});
let app = new Vue(
{
el:'#app',
data:
{
board: new Board()
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<card v-for="card in board.cards" v-bind:card="card">
</div>
Or if you wanted key as well as card so Vue.js puts the cards in order by card.img, you'd have both:
function Board()
{
this.cards = [new Card()];
}
function Card()
{
this.img = 'img.png';
}
Vue.component('card',
{
props:['card'],
template: '<img v-bind:src="card.img">'
});
let app = new Vue(
{
el:'#app',
data:
{
board: new Board()
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<card v-for="card in board.cards" v-bind:key="card.img" v-bind:card="card">
</div>
I want to use slots in Vue to create a dynamic modal component.
I already tried a lot of tutorials of Vue / slots, but none of them is exactly what i'm looking for.
This is a piece of my modal.vue:
<template>
...
<slot name="modal-body"></slot>
...
</template>
<script>
</script>
<style>
</style>
This is my javascript compiled file:
import Vue from 'vue';
import modal from './modal.vue';
new Vue({
el: '#modal',
render: r => r(modal)
});
This is piece of my HTML file:
...
<div id="modal">
<template v-slot="modal-body">
<input type="text" id="dynamic-input">
</template>
</div>
...
I was expecting that all elements present inside #modal (#dynamic-input in this case), were inserted into the slot named modal-body, inside my Vue element.
Is it possible to do it? Am i missing something?
Check what version of Vue you are using. The named slot syntax changed in 2.6.0. Consider the differences below. One uses render functions and the other template Strings.
Vue#2.6.10
// Example using template String
const modalTemplateString = {
template: "<div><div>above</div><slot name=\"modal-body\"></slot><div>below</div></div>"
};
const appTemplateString = new Vue({
el: "#appTemplateString",
components: {
modal: modalTemplateString
},
template: "<div><modal><template v-slot:modal-body><div>foobar</div></template></modal></div>"
});
// Example using render function
const modalRenderFunc = {
render(h) {
return h("div", [
h("div", "above"),
h("div", this.$slots["modal-body"]),
h("div", "below")
]);
}
}
const appRenderFunc = new Vue({
el: "#appRenderFunc",
components: {
modal: modalRenderFunc
},
render(h) {
return h("div", [
h("modal", [
h("div", {
slot: "modal-body"
}, "foobar")
])
]);
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<h2>Template String</h2>
<div id="appTemplateString"></div>
<hr/>
<h2>Render Function</h2>
<div id="appRenderFunc"></div>
Vue#2.5.22
// Example using template String
const modalTemplateString = {
template: "<div><div>above</div><slot name=\"modal-body\"></slot><div>below</div></div>"
};
const appTemplateString = new Vue({
el: "#appTemplateString",
components: {
modal: modalTemplateString
},
template: "<div><modal><template slot=\"modal-body\"><div>foobar</div></template></modal></div>"
});
// Example using render function
const modalRenderFunc = {
render(h) {
return h("div", [
h("div", "above"),
h("div", this.$slots["modal-body"]),
h("div", "below")
]);
}
}
const appRenderFunc = new Vue({
el: "#appRenderFunc",
components: {
modal: modalRenderFunc
},
render(h) {
return h("div", [
h("modal", [
h("div", {
slot: "modal-body"
}, "foobar")
])
]);
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.22/dist/vue.js"></script>
<h2>Template String</h2>
<div id="appTemplateString"></div>
<hr/>
<h2>Render Function</h2>
<div id="appRenderFunc"></div>
I'm working in a Vue component that I'll publish when it's finished that wraps Clusterize.js (there is a vue-clusterize component but it only works for v1.x). What I want to achieve is to render a huge list of items pretty fast using Vue. I actually need it for a table. I tried with vue-virtual-scroll but it doesn't support tables and the performance is not that good. So I wanted to try with Clusterize.js.
Because I want this component to be highly configurable I decided that you will be able to provide a scoped slot for each row of the items list where you will receive the item. The problem is when I try to assign the scoped slot from the clusterize componets to each row before mounting the component it doesn't work.
Here you have some snippets of my code (it is just a mvp)
clusterize.vue
Template
<div class="clusterize">
<table>
<thead>
<tr>
<th>Headers</th>
</tr>
</thead>
</table>
<div
ref="scroll"
class="clusterize-scroll">
<table>
<tbody
ref="content"
class="clusterize-content">
<tr class="clusterize-no-data">
<td>Loading...</td>
</tr>
</tbody>
</table>
</div>
Script
import Vue from 'vue';
import Clusterize from 'clusterize.js';
export default {
name: 'Clusterize',
props: {
items: {
type: Array,
required: true,
},
},
data() {
return {
clusterize: null,
};
},
computed: {
rows() {
return this.items.map(item => '<tr><slot :item="1"/></tr>');
},
},
watch: {
rows() {
this.clusterize.update(this.rows);
},
},
mounted() {
const scrollElem = this.$refs.scroll;
const contentElem = this.$refs.content;
this.clusterize = new Clusterize({
rows: this.rows,
scrollElem,
contentElem,
});
this.clusterize.html = (template) => {
contentElem.innerHTML = template;
const instance = new Vue({ el: contentElem });
instance.$slots = this.$slots;
instance.$scopedSlots = this.$scopedSlots;
instance.$mount();
console.log(instance.$scopedSlots); // empty
console.log(instance.$slots) // not empty
};
},
};
component.vue
<clusterize :items="test">
<template slot-scope="props">
item
</template>
</clusterize>
The thing is that if it don't use a scoped slot it works perfectly but I really need to use them otherwise the component doesn't have any sense.
I'll appreciate any help or advice.
Thank you so much in advance.
The issue should be caused by mount different Vue instance to same el multiple times (please look into the second demo, you shouldn't mount multiple instances to same element, the following instances will not mount since the element is already “blocked” by first instance).
My solution: create Vue instance (doesn't bind to el) in the air then take vm.$el as the output.
Please look into below simple demo,
Vue.config.productionTip = false
Vue.component('clusterize', {
template: `<div class="clusterize">
<table>
<thead>
<tr>
<th>Headers</th>
</tr>
</thead>
</table>
<div
ref="scroll"
class="clusterize-scroll">
<table>
<tbody
ref="content"
id="clusterize-id"
class="clusterize-content">
<tr class="clusterize-no-data">
<td>Loading...</td>
</tr>
</tbody>
</table>
</div></div>`,
props: {
items: {
type: Array,
required: true,
},
},
data() {
return {
clusterize: null,
clusterVueInstance: null
};
},
computed: {
rows() {
return this.items.map(item => {
return '<tr><td><span>' +item+'</span><slot :item="1"/></td></tr>'
});
},
},
watch: {
rows() {
this.clusterize.update(this.rows);
},
},
mounted() {
const scrollElem = this.$refs.scroll;
const contentElem = this.$refs.content;
this.clusterize = new Clusterize({
rows: this.rows,
scrollElem,
contentElem,
});
this.clusterize.html = (template) => {
this.clusterize.content_elem.innerHTML = template;
if(this.clusterVueInstance) {
this.clusterVueInstance.$destroy()
this.clusterVueInstance = null
}
this.clusterVueInstance = new Vue({ template: '<tbody>'+template+'</tbody>' })
//or use Vue.extend()
this.clusterVueInstance.$slots = this.$slots
this.clusterVueInstance.$scopedSlots = this.$scopedSlots
this.clusterVueInstance.$mount()
this.clusterize.content_elem.innerHTML = this.clusterVueInstance.$el.innerHTML
//console.log(this.clusterVueInstance.$scopedSlots); // empty
//console.log(this.clusterVueInstance.$slots) // not empty*/
};
}
})
app = new Vue({
el: "#app",
data() {
return {
test: ['Puss In Boots', 'test 1', 'test2'],
index: 0
}
},
mounted: function () {
//this.test = ['Puss In Boots', 'test 1', 'test2']
},
methods: {
addItem: function () {
this.test.push(`test ` + this.index++)
}
}
})
<link href="https://cdn.bootcss.com/clusterize.js/0.18.0/clusterize.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/clusterize.js/0.18.0/clusterize.min.js"></script>
<div id="app">
<button #click="addItem()">
Add Item
</button>
<clusterize :items="test">
<template slot-scope="props">
item: {{props.item}}
</template>
</clusterize>
</div>
Please look into below demo: created multiple Vue instance to same el, but Vue always uses first instance to render (I can't find any useful statement at Vue Guide, probably from the source codes from Vue Github we can find out the logic. If someone knows, please feel free to edit my answer or add a comment).
Vue.config.productionTip = false
app1 = new Vue({
el: '#app',
data () {
return {
test: 'test 1'
}
},
mounted(){
console.log('app1', this.test)
}
})
app2 = new Vue({
el: '#app',
data () {
return {
test: 'test 2'
}
},
mounted(){
console.log('app2', this.test)
}
})
//app1.$data.test = 3
//app1.$mount() //manual mount
app2.$data.test = 4
app2.$mount() //manual mount
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/clusterize.js/0.18.0/clusterize.min.js"></script>
<div id="app">
<a>{{test}}</a>
</div>
I'm trying to use a statement within a element:
v-if="currentstep < maxStep"
The maxStep should be obtained from the number of components listed on my defauld export
export default {
name: 'step',
data () {
return {
maxStep: 8,
currentstep: 0
}
},
components: {
ConfigPublicador,
ConfigServico,
ModeloReceita,
Integracoes,
ConfigTema,
ConfigApp,
ConfigExtras,
Assets,
Revisao
}
}
Something like
maxStep = components.length
Any Ideias?
Thanks
This is definitely a code smell. But, you can get that value via Object.keys(this.$options.components).length.
Here's an example:
const Foo = {
template: '<div></div>',
}
new Vue({
el: '#app',
components: { Foo },
data() {
return {
count: 0,
}
},
created() {
this.count = Object.keys(this.$options.components).length;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
<div v-if="count > 0">
There is at least one component
</div>
</div>
I'm trying to get a method to execute on a parent component when a button in one of its child components is clicked. I am using single file components with Webpack. Here's the code for the child component:
<template>
<button v-on:click="add">Click</button>
</template>
<script>
export default {
methods: {
add: () => {
console.log('foo')
this.$dispatch('addClick')
}
}
}
</script>
And the code for the parent:
<template>
<div id="app">
<count :total="total"></count>
<click></click>
</div>
</template>
<script>
import count from './components/count.vue'
import click from './components/click.vue'
export default {
components: {
count,
click
},
data: () => {
return {
total: 0
}
},
methods: {
addToTotal: () => {
console.log('bar')
this.total += 1
}
},
events: {
addClick: 'addToTotal'
}
}
</script>
The count component is just an h1 element that displays the total variable. When I click the button, "foo" logs to the console, but "bar" does not and the total doesn't change. Any ideas on what I'm doing wrong? Thanks in advance!
You are using lambda notation for your methods, which is giving them the wrong this. If you use function instead, it will work.
Vue.component('click', {
template: '#clicker',
methods: {
add: function() {
console.log('foo')
this.$dispatch('addClick')
}
}
})
new Vue({
el: '#app',
data: () => {
return {
total: 0
}
},
methods: {
addToTotal: function () {
console.log('bar')
this.total += 1
}
},
events: {
addClick: 'addToTotal'
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<template id="clicker">
<button v-on:click="add">Click</button>
</template>
<div id="app">
<count :total="total"></count>
<click></click>
{{total}}
</div>
Use two-way .sync binding type modifier on total property of count component so that the value will be updated when parent total value is changed. Here is an example:
Vue.component('click', {
template: '<button v-on:click="add">Click</button>',
methods: {
add: function () {
this.$dispatch('addClick');
}
}
});
Vue.component('count', {
template: '<h1 v-text="total"></h1>',
props: {
total: {
type: Number,
twoWay: true
}
}
});
new Vue({
el: '#app',
data: {
total: 1
},
methods: {
addTotal: function () {
this.total++;
}
},
events: {
addClick: 'addTotal'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<div id="app">
<count :total.sync="total"></count>
<click></click>
</div>