I am using vue 2.0.
I want to generate this template:
<Poptip placement="right" width="400">
<Button type="ghost">click 激活</Button>
<div class="api" slot="content">my content</div>
</Poptip>
Using the render function:
render: (h, params) => {
return h('Poptip', {
props: {
placement: 'right'
}
}, [
h('Button', {
props: {
type: 'ghost'
}
}, 'Edit'),
h('div', {
props: {
slot: 'content'
}
}, 'My content')
])
}
Using the template works perfectly. But, when I use the render function, the slot's content is not replaced with my content.
You are specifing a prop named slot with value content:
h('div', {
props: {
slot: 'content'
}
}, 'My content')
To simply specify a slot named content:
h('div', {
slot: 'content'
}, 'My content')
See the documentation.
Related
I hava a component with complex nested props:
<template>
<div>
<a-tree :tree-data="data" :selected-keys="[selectedKey]" #select="onSelect" />
<div>
<a-input v-model="sheet[selectedKey].tableName" />
<ux-grid ref="previewTable">
<ux-table-column v-for="field in sheet[selectedKey].fields"
:key="field.name" :field="field.name">
<a-input slot="header" v-model="field.label" />
</ux-table-column>
</ux-grid>
</div>
</div>
</template>
<script>
export default {
props: {
previewData: { type: Array, default: () => [] }
},
data () {
return {
data: this.previewData,
selectedKey: '0-0-0',
sheet: { 'none': { tableName: null, fields: [] } }
}
},
created () {
this.data.forEach((file, fid) => {
file.sheets.forEach((sheet, sid) => {
this.$set(this.sheet, `0-${fid}-${sid}`, {
tableName: sheet.label,
fields: sheet.fields.map(field => ({ ...field }))
})
})
})
},
mounted () {
this.$refs.previewTable.reloadData(this.data[0].sheets[0].data)
},
methods: {
onSelect ([ key ], { node }) {
if (key !== undefined && 'fields' in node.dataRef) {
this.selectedKey = key
this.$refs.previewTable.reloadData(node.dataRef.data)
} else {
this.selectedKey = 'none'
this.$refs.previewTable.reloadData()
}
}
}
}
</script>
And previewData props is something like:
{
name: "example.xlsx",
filename: "80b8519f-f7f1-4524-9d63-a8b6c92152b8.xlsx",
sheets: [{
name: "example",
label: "example",
fields:[
{ label: "col1", name: "col1", type: "NUMBER" },
{ label: "col2", name: "col2", type: "STRING" }
]
}]
}
</script>
This component allows user to edit the label properties. I have to make Object sheet reactive to user input, and I tried $set and Object.assign, it works for sheets.label but fields[].label is still not reactive.
I wish to know what would be the declarative (and optimal) solution for it
You might need a watcher or computed property in React for previewData to be changed.
Currently i am trying to get the value of altLanguages and output that dynamically in a JSON, so it can be injected into the head. The altLanguages are the meta attribute values that should be added before rendering the page to avoid the error (altLanguages is undefined). Anyone know how to do that.
<template>
<header class="site-header">
<router-link to="/" class="logo">Example Site</router-link>
<nav>
<ul>
<li v-for="menuLink in menuLinks" :key="menuLink.id">
<prismic-link :field="menuLink.link">{{ $prismic.richTextAsPlain(menuLink.label) }}</prismic-link>
</li>
</ul>
</nav>
<alternate-languages :altLanguages="altLanguages" />
<!-- <alternate-content :altLanguages="altLanguages" /> -->
</header>
</template>
<script>
export default {
props: {
id: { type: String, default: "" },
altLanguages: { type: Array, default: () => ([]) }
},
data() {
return {
menuContent: [],
menuLinks: [],
// altLanguages: []
};
},
methods: {
async getMenu(lang) {
//Query to get menu content
const menuContent = await this.$prismic.client.getSingle("menu", {
lang: lang
});
this.menuContent = menuContent;
this.menuLinks = menuContent.data.menu_links;
}
},
created() {
// this.getLanguages(this.id);
this.getMenu(this.$route.params.lang);
},
watch: {
$route(to, from) {
this.getMenu(to.params.lang);
}
}
// beforeRouteUpdate(to, from, next) {
// console.log("new");
// this.getMenu(to.params.lang);
// next();
// }
};
</script>
//expected output
export default {
data: function () {
return {
title: 'My Title'
}
},
// Usage with context the component
head: {
// To use "this" in the component, it is necessary to return the object through a function
title: function () {
return {
inner: this.title
}
},
meta: [
// altLanguages should be output in here.....
{ name: 'description', content: 'My description', id: 'desc' }
]
}
...
}
}
I try to render a bootstrap tooltip (https://bootstrap-vue.js.org/docs/components/tooltip/) within a header of an element-ui table.
I use the custom header render method:
<el-table-column
v-for="(column, index) in headers"
:render-header="renderHeader"
/>
The following code renders as expected except of the id which is missing. For debugging purposes I added a class which renders as expected:
renderHeader(h, { column }) {
return h(
'div',
{
id: `tooltip-target__${column.property}`,
class: 'some-class'
},
[
column.label,
h(
'b-tooltip',
{
attrs: {
triggers: 'hover',
target: `tooltip-target__${column.property}`
}
},
column.label
)
]
);
},
The id needs to be defined inside the attrs object:
renderHeader(h, { column }) {
return h(
'div',
{
attrs: {
id: `tooltip-target__${column.property}`
}
class: 'some-class'
},
[
column.label,
h(
'b-tooltip',
{
attrs: {
triggers: 'hover',
target: `tooltip-target__${column.property}`
}
},
column.label
)
]
);
},
I found a good example in the documentation:
https://v2.vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
My svg shape elements and they attributes was query from server side then
how to render that dynamically in vue to use v-for without static html tag?
Sounds like a job for a Render Function. For example:
Create SvgElement.vue:
render: function (createElement) {
return createElement(
this.shapeType,
{
attrs: this.attrObj
},
this.$slots.default
)
},
props: {
shapeType: {
type: String,
required: true
},
attrString: {
type: string
}
},
computed: {
attrObj() {
// Convert this.attrString into an object
// eg return { cx: 50, cy: 50, r: 10, fill: 'red' }
}
}
Then use in MyComponent.vue
<template>
<svg width="400" height="400">
<SvgElement
v-for="svg in svgArray"
:key="svg.key"
:shapeType="svg.type"
:attrString="svg.attr"
/>
</svg>
</template>
<script>
import SvgElement from './SvgElement'
export default {
components: {
SvgElement
},
data () {
return {
svgArray: [
{ type: 'rect', attr: 'attrString', key: 'shape1' },
{ type: 'circle', attr: 'attrString', key: 'shape2' }
]
}
}
}
</script>
Im using Vuetify, and have a form where im using VeeValidate for form validation...
When im using this:
this.$validator.validateAll().then((result) => {
console.log("result form", result);
//result ? this.onSubmit() : scrollTo(0, 250);
});
It always returns true, even if the validation on my input field isn't valid...
The input looks like:
<v-textarea
filled
name="string"
:label="placeholderText"
auto-grow
single-line
:placeholder="placeholderText"
v-model="answer"
:required="isRequired"
v-validate:computedProp="checkRequired"
:error-messages="errors.collect('string')"
data-vv-name="string"
:hint="hintText"
#blur="updateAnswer"
></v-textarea>
The code for the input component:
export default {
$_veeValidate: {
validator: 'new'
},
name: 'String',
props: {
placeholderText: {
default: 'Add a value'
},
hintText: {
default: 'Add a value'
},
isRequired: {
default: true
}
},
data: () => ({
answer: ''
}),
computed: {
checkRequired() {
return this.isRequired ? 'required' : ''
}
},
methods: {
updateAnswer() {
this.$validator.validateAll();
this.$emit('updateAnswer', this.answer);
}
}
}
Im calling this.$validator.validateAll() in another component... The input component is a standalone component... I have it all wrappet in a form tag, and running the validate function on a submit
You have two choice:
Pass to the component the v-validate from the $attrs
Inject the $validator to the component
Parent
export default {
name: "App",
components: {
YourComponent
},
provide() {
return {
$validator: this.$validator
};
},
Child
$_veeValidate: {
validator: "new"
},
inject: ["$validator"],
name: "String",
You can also simplify your html code, see the VeeValidate Syntax
Html
v-validate="{ required: this.isRequired }"
And you can safely remove
:required="isRequired"