Dynamic Vue components with sync and events - vue.js

I'm using <component v-for="..."> tags in Vue.js 2.3 to dynamically render a list of components.
The template looks like this:
<some-component v-for="{name, props}, index in modules" :key="index">
<component :is="name" v-bind="props"></component>
</some-component>
The modules array is in my component data() here:
modules: [
{
name: 'some-thing',
props: {
color: '#0f0',
text: 'some text',
},
},
{
name: 'some-thing',
props: {
color: '#f3f',
text: 'some other text',
},
},
],
I'm using the v-bind={...} object syntax to dynamically bind props and this works perfectly. I also want to bind event listeners with v-on (and use .sync'd props) with this approach, but I don't know if it's possible without creating custom directives.
I tried adding to my props objects like this, but it didn't work:
props: {
color: '#f3f',
text: 'some other text',
'v-on:loaded': 'handleLoaded', // no luck
'volume.sync': 'someValue', // no luck
},
My goal is to let users re-order widgets in a sidebar with vuedraggable, and persist their layout preference to a database, but some of the widgets have #events and .synced props. Is this possible? I welcome any suggestions!

I don't know of a way you could accomplish this using a dynamic component. You could, however, do it with a render function.
Consider this data structure, which is a modification of yours.
modules: [
{
name: 'some-thing',
props: {
color: '#0f0',
text: 'some text',
},
sync:{
"volume": "volume"
},
on:{
loaded: "handleLoaded"
}
},
{
name: 'other-thing',
on:{
clicked: "onClicked"
}
},
],
Here I am defining two other properties: sync and on. The sync property is an object that contains a list of all the properties you would want to sync. For example, above the sync property for one of the components contains volume: "volume". That represents a property you would want to typically add as :volume.sync="volume". There's no way (that I know of) that you can add that to your dynamic component dynamically, but in a render function, you could break it down into it's de-sugared parts and add a property and a handler for updated:volume.
Similarly with the on property, in a render function we can add a handler for an event identified by the key that calls a method identified in the value. Here is a possible implementation for that render function.
render(h){
let components = []
let modules = Object.assign({}, this.modules)
for (let template of this.modules) {
let def = {on:{}, props:{}}
// add props
if (template.props){
def.props = template.props
}
// add sync props
if (template.sync){
for (let sync of Object.keys(template.sync)){
// sync properties are just sugar for a prop and a handler
// for `updated:prop`. So here we add the prop and the handler.
def.on[`update:${sync}`] = val => this[sync] = val
def.props[sync] = this[template.sync[sync]]
}
}
// add handers
if (template.on){
// for current purposes, the handler is a string containing the
// name of the method to call
for (let handler of Object.keys(template.on)){
def.on[handler] = this[template.on[handler]]
}
}
components.push(h(template.name, def))
}
return h('div', components)
}
Basically, the render method looks through all the properties in your template in modules to decide how to render the component. In the case of properties, it just passes them along. For sync properties it breaks it down into the property and event handler, and for on handlers it adds the appropriate event handler.
Here is an example of this working.
console.clear()
Vue.component("some-thing", {
props: ["volume","text","color"],
template: `
<div>
<span :style="{color}">{{text}}</span>
<input :value="volume" #input="$emit('update:volume', $event.target.value)" />
<button #click="$emit('loaded')">Click me</button>
</div>
`
})
Vue.component("other-thing", {
template: `
<div>
<button #click="$emit('clicked')">Click me</button>
</div>
`
})
new Vue({
el: "#app",
data: {
modules: [{
name: 'some-thing',
props: {
color: '#0f0',
text: 'some text',
},
sync: {
"volume": "volume"
},
on: {
loaded: "handleLoaded"
}
},
{
name: 'other-thing',
on: {
clicked: "onClicked"
}
},
],
volume: "stuff"
},
methods: {
handleLoaded() {
alert('loaded')
},
onClicked() {
alert("clicked")
}
},
render(h) {
let components = []
let modules = Object.assign({}, this.modules)
for (let template of this.modules) {
let def = {
on: {},
props: {}
}
// add props
if (template.props) {
def.props = template.props
}
// add sync props
if (template.sync) {
for (let sync of Object.keys(template.sync)) {
// sync properties are just sugar for a prop and a handler
// for `updated:prop`. So here we add the prop and the handler.
def.on[`update:${sync}`] = val => this[sync] = val
def.props[sync] = this[template.sync[sync]]
}
}
// add handers
if (template.on) {
// for current purposes, the handler is a string containing the
// name of the method to call
for (let handler of Object.keys(template.on)) {
def.on[handler] = this[template.on[handler]]
}
}
components.push(h(template.name, def))
}
return h('div', components)
},
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app"></div>

Related

can add components dynamically in component in vuejs

how can I add components dynamically in component?
notice : i don't want to save component global. i just want to add components locally.
best way for define problem is show code
export default {
name: 'tabMaker',
props: {
components_: {
type: Array,
default: [],
},
},
components: {
// how can add components dynamically in here ?
},
data() {
return {}
},
created() {
var self=this;
this.components_.forEach((item)=>{
Object.entries(item).forEach(([key, value]) => {
// key = component name
// value = object component
// ????
// add component in props in object componenents
self.components[key]=value;// not work ? TODO
// ?????
});
})
},
}
You can pass the names of components, e. g. ['comp1', 'comp2'], then you have to register all the components, that could be passed (components: {comp1, comp2, comp3...}), and then you can use this structure:
<component v-for="(component, key) in components" :key="key" :is="component" />
this method would render the components you passed

Vue 3 Composition API - Props default and DOM inside lifecycle methods

I have a Vue component inside a NuxtJS app and I'm using the #nuxtjs/composition-api.
I have this component which is a <Link> component and I would like to make the code clearer.
I have a computed property that determines to color of my UiIcon from iconColor, iconColorHover, IconActive. But most importantly, I want to set it to a specific color if I have a disable class on my root component. It works like that but it doesn't look too good I believe.
I found out that undefined is the only value that I can use to take UiIcon default props if not defined. Empty string like '' would make more sense to more but it's considered as a valid value. I would have to do some ternary conditions in my UiIcon and I'd like to avoid that.
<template>
<div ref="rootRef" class="row">
<UiIcon
v-if="linkIcon"
:type="linkIcon"
:color="linkIconColor"
class="icon"
/>
<a
class="link"
:href="linkHref"
:target="linkTarget"
:rel="linkTarget === 'blank' ? 'noopener noreferrer' : null"
#mouseover="linkActive = true"
#mouseout="linkActive = false"
>
<slot></slot>
</a>
</div>
</template>
<script lang="ts">
import {
defineComponent,
computed,
ref,
toRefs,
nextTick,
onBeforeMount,
} from '#nuxtjs/composition-api';
import { Colors } from '~/helpers/styles';
export default defineComponent({
name: 'Link',
props: {
href: {
type: String,
default: undefined,
},
target: {
type: String as () => '_blank' | '_self' | '_parent' | '_top',
default: '_self',
},
icon: {
type: String,
default: undefined,
},
iconColor: {
type: String,
default: undefined,
},
iconHoverColor: {
type: String,
default: undefined,
},
},
setup(props) {
const { href, target, icon, iconColor, iconHoverColor } = toRefs(props);
const linkActive = ref(false);
const rootRef = ref<HTMLDivElement | null>(null);
const writableIconColor = ref('');
const linkIconColor = computed({
get: () => {
const linkDisabled = rootRef.value?.classList.contains('disabled');
if (linkDisabled) {
return Colors.DARK_GREY;
}
if (linkActive.value && iconHoverColor.value) {
return iconHoverColor.value;
}
return iconColor.value;
},
set: (value) => {
writableIconColor.value = value;
},
});
onBeforeMount(() => {
nextTick(() => {
const linkDisabled = rootRef.value?.classList.contains('disabled');
if (linkDisabled) {
linkIconColor.value = Colors.DARK_GREY;
}
});
});
return {
rootRef,
linkHref: href,
linkTarget: target,
linkIcon: icon,
linkIconColor,
linkActive,
};
},
});
</script>
Implementing disabled status for a component means it will handle two factors: style (disabled color) and function. Displaying a disabled color is only a matter of style/css. implementing it in programmatical way means it'll take longer time to render completely on user's side and it'll lose more SEO scores. examine UiIcon's DOM from browser and override styles using Deep selectors.
If I were handling this case, I would have described the color with css and try to minimize programmatic manipulation of style.
<template>
<div :disabled="disabled">
</div>
</template>
<script>
export default {
props: {
disabled: {
type: Boolean,
default: false,
}
}
}
</script>
// it does not have to be scss.
// just use anything that's
// easier to handle variables.
<style lang="scss">
// I would normally import css with prepend option from webpack,
// but this is just to illustrate the usage.
#import 'custom-styles.scss';
&::v-deep button[disabled] {
color: $disabled-color;
}
</style>
attach validator function on the props object. it'll automatically throw errors on exceptions.
{
props: {
icon: {
type: String,
default: "default-icon",
validator(val) {
return val !== "";
// or something like,
// return val.includes(['iconA', 'iconB'])
},
},
}
}

Vue 3 & Composition API : template refs in v-for loop error : only get proxies

I've been developing my first project with Vue3.js & Vue Cli and I've been stuck for the past couple of hours on this bit of code.
Basically what I'm trying to do is to have a list of buttons based on an array of objects created in the setup() part of the code. All objects also contain their own ref within the array itself, which I eventually bind on the template. I then make consts out of each ref so that I can use them within the setup() but when I console.log(btnConvert.value) I get a proxy, which I don't with my other refs that aren't within a v-for loop.
RefImpl {_rawValue: Proxy, _shallow: false, __v_isRef: true, _value: Proxy}
Here's the expanded version of the console.log(btnConvert.value)
Proxy {…}
[[Handler]]: Object
get: ƒ get({ _: instance }, key)
has: ƒ has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key)
ownKeys: (target) => {…}
set: ƒ set({ _: instance }, key, value)
[[Prototype]]: Object
[[Target]]: Object
[[IsRevoked]]: false
I tried everything I could think of, but I couldn't understand the official Vue doc.
Could anyone help me understand how I could retrieve the DOM elements with those refs?
Thank you very much !
Here's the bit of relevant code (I removed the functions to which the btn refer for ease of lecture).I can add some more if necessary.
<template>
<div>
<div ref="btnList" class="options">
<vBtn
v-for="btn in btnArray"
:key="btn"
:ref="btn.ref"
class="btn"
:class="`btn--${btn.class}`"
#click="btn.action"
v-html="btn.text"
/>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
import vBtn from '#/components/Tool/vBtn.vue'
export default {
components : {
vBtn
},
setup() {
const btnConvert = ref(null)
const btnCopy = ref(null)
const btnCancel = ref(null)
const btnUndo = ref(null)
const btnErase = ref(null)
const btnArray = [
{
class: 'convert',
text: 'some text',
action: convertText,
ref: btnConvert
},
{
class: 'undo',
text: 'some text',
action: undoConvert,
ref: btnUndo
},
{
class: 'cancel',
text: 'some text',
action: cancelChange,
ref: btnCancel
},
{
class: 'erase',
text: 'some text',
action: eraseText,
ref: btnErase
},
{
class: 'copy',
text: 'some text',
action: copyText,
ref: btnCopy
}
]
onMounted() {
console.log(btnConvert.value)
// this is where I get the proxy
}
},
}
</script>
I am sorry but I am not able to replicate your results
I do not understand how you can get anything else then null from console.log(btnConvert.value) when you are not rendering 1st button at all thanks to v-for="btn in btnArray.slice(1)" (which effectively creates new array without the first element in source array)
It just works! See below example
Just a note:
Could anyone help me understand how I could retrieve the DOM elements with those refs?
Because ref is placed on Vue component (vBtn), it will never be an HTML element. It will be always a component instance...
const app = Vue.createApp({
setup() {
const buttons = ['convert', 'undo', 'cancel', 'erase', 'copy']
const action = (param) => alert(param)
const btnArray = buttons.map((item) => ({
text: item,
action: action,
ref: Vue.ref(null)
}))
Vue.onMounted(() => {
console.log(btnArray[0].ref.value)
console.log(btnArray)
})
return {
btnArray
}
}
})
app.mount("#app")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.global.js" integrity="sha512-1gHWIGJfX0pBsPJHfyoAV4NiZ0wjjE1regXVSwglTejjna0/x/XG8tg+i3ZAsDtuci24LLxW8azhp1+VYE5daw==" crossorigin="anonymous"></script>
<div id="app">
<button
v-for="(but, i) in btnArray"
:key="i"
#click="but.action(but.text)"
:ref="but.ref"
>
{{ but.text }}
</button>
</div>

Chart can't be populated from data component [vue-highcharts wrapper]

I'm starting with the Higcharts wrapper for vue. Currently I'm migrating the code of a stockchart that I was using outside vue without problems into the wrapper. Everything is going well except that I can't populate the chart from component data or computed variables. Only from hard-written array or from component props.
This is the code:
<template>
<highcharts
class="stock"
v-bind:constructor-type="'stockChart'"
v-bind:options="config"
v-bind:deepCopyOnUpdate="false"
></highcharts>
</template>
<script>
export default {
name: "stockChart",
props: {
options: {
type: Object,
required: true
}
},
data: function() {
return {
config: {
series: [{
name: this.options.title,
//data: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]] //THIS WORKS!
//data: this.options.plotData //THIS ALSO WORKS!!
data: this.plotData //THIS DOESN'T...
}],
(...)
},
plotData: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]]
}
},
computed: {
// THIS ALSO ISN'T WORKING... THAT IS HOW I WANT IT TO WORK
/*plotData: function(){
return this.options.xData.map((e,i) => [e, this.options.yData[i]]);
}*/
}
}
</script>
<style scoped>
.stock {
width: 70%;
margin: 0 auto
}
</style>
I don't understand anything. The three methods should be equivalent. Why I can load data from props but not from data or computed? I can't find any good documentation about the vue wrapper to understand why is this happening.
Thanks for your help,
H25E
The answer is very simple. The reason is that the Vue defines all component data only after returning a whole data object, so you should not use this keyword to refer other component data within data definition. In order to make it work correctly, you should keep the plotData within component's data, but move the config into the computed properties. Take a look on the code below:
props: {
options: {
type: Object,
required: true
}
},
data: function() {
return {
plotData: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]]
}
},
computed: {
config: function() {
return {
series: [{
name: this.options.title,
data: this.plotData
}]
}
},
}

'this' context in functional component's child event handler

I am trying to create custom event handlers for child components/elements of the functional component. The problem is that when using a render() function to create the child components, I cannot access their this context.
Suppose we have the following functional component:
const Aggregate = {
functional: true,
props: {
value: Object // to work with v-model
},
render: function(createElement, context){
const template = []
const inputHandler = function(value, prop){
const data = Object.assign({}, context.props.value, { [prop]: value })
console.log(context.props.value)
console.log(data)
this.$emit('input', data)
}
for (const prop of Object.keys(context.props.value)){
const child = createElement('input', {
props: {
value: context.props[prop]
},
on: {
input: function(event){
// 'this' is not binded here - it is undefined,
// hence the inputHandler() function is
// rising an error
inputHandler.apply(this, [event.target.value, prop])
}
}
})
template.push(child)
}
return template
}
}
Is it possible to access this context for a vnode, when creating event handler this way?
P.S. Use case info: I want to implement a component that automatically generates <input> elements for a resource and uses two-way binding through v-model directive. I also want to use it in <table> where wrapping in <td> will be required, thus I made the component functional.
Functional components don't a have a "this", because there is no Vue instance for them. This makes them lightweight.
This also means emiting events from them is kind of harder, since you need to implement Vue's logic yourself.
Lacking an instance doesn't mean you cannot events, instead, you need to manually parse context.listeners and call the event handler manually. In the case of v-model, you need to call the input listener:
const Aggregate = {
functional: true,
props: {
value: Object // to work with v-model
},
render: function(createElement, context){
const template = []
const inputHandler = function(value, prop, handler){
const data = Object.assign({}, context.props.value, { [prop]: value })
console.log(context.props.value)
console.log(data)
// Call handler directly instead of using this.$emit
handler(data)
}
for (const prop of Object.keys(context.props.value)){
console.log(context.props.value, prop)
const child = createElement('input', {
// Small bug fixes in the following section:
domProps: {
value: context.props.value[prop]
},
// End bug fixes
on: {
input: function(event){
// pass `context.listeners.input` instead of binding here
inputHandler(event.target.value, prop, context.listeners.input)
}
}
})
template.push(child)
}
return template
}
}
new Vue({
el: "#app",
components: {
Aggregate
},
data: {
test: {
key1: "val1",
key2: "val2",
}
},
})
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<aggregate v-model="test"></aggregate>
<pre>{{ test }}</pre>
<button #click="test = {...test, ping: 'pong'}">Add key</button>
</div>