<template>
<div>
<q-btn
v-bind="$attrs"
@click="show = true"
></q-btn>
<q-dialog v-model="show">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
</p>
<q-btn
label="OK"
@click="show = false"
/>
</q-dialog>
</div>
</template>
<script>
export default {
inheritAttrs: false,
data () {
return {
show: false
}
}
}
</script>import { h } from 'vue'
const component = (props, context) => {
var size = props.size.slice(-1) === 'x' ? props.size.slice(0, props.size.length - 1) + 'em' : parseInt(props.size) + 'px';
//....
}
export default componentfunction initialData () {
return {
info: {
state1: 10,
state2: 20,
state3: 30
}
}
}
export default {
data () {
return initialData()
},
methods: {
flush () {
const data = initialData()
Object.keys(data).forEach(key => {
this[key] = initialData[key]
})
}
}
}Важное замечание о времени регистрации ссылок: поскольку ссылки создаются render-функцией, вы не сможете использовать их при первичной отрисовке — на тот момент они ещё не существуют! Кроме того, объект $refs не является реактивным, поэтому не стоит пытаться использовать его в шаблонах для связывания данных.
newItem: {title:'', text:''}, передал бы его в качестве v-model в компонент. ...
props:['value'],
data(){return {local: null}},
watch: {
value: {handler(newVal) {this.local=newVal}, deep: true, immediate: true},
local: {handler(newVal) {this.$emit('input', newVal)}, deep: true}
}
...<div id="app">
<date-pick
v-model="date1"
:pick-time="true"
:selectable-year-range="{ from: 2000, to: 2020 }"
:format="'DD.MM.YYYY HH:mm'">
</date-pick>
<date-pick
v-model="date2"
:pick-time="true"
:selectable-year-range="{ from: 2000, to: 2020 }"
:format="'DD.MM.YYYY HH:mm'">
</date-pick>
</div>new Vue({
el: '#app',
data: {
date1: '',
date2: '',
},
components: {
'date-pick': VueDatePick
}
})