I cannot find how to add v-model to draggable component in Vue2.
found some example in documentation, but it doesn't work.
I tried different variants like adding of list property to component, but it does not work.
const draggableItem = h('draggable', {
class: '',
attrs: {
'group':'people',
ghostClass: 'ghost',
animation: 200,
handle: '.drag-widget'
},
on: {
input: (event) => {
console.log('on input');
this.data.list = event.target.value
this.$emit('data.list', event.target.value)
},
end: () => {
console.log('drag on end');
this.handleMoveEnd()
},
add: (event) => {
console.log('drag on add', this.data.list);
console.log(event.dataTransfer);
this.handleWidgetAdd(event)
}
}
},
[transitionGroupItem]
);
Could somebody help me with it?
Tried to add to attributes list property like list: this.data.list, but it also doesn't work
V-model is basically combination of reactive prop :value and input. Value prop for initializing it and input event to update parent's version of it.
Here is very good guide - Adding V-model to custom vue component
On being added to the list, it should emit('input',data.list) and also there assign to a data value to avoid mutating the prop.
Related
I have a component with v-if which is true/visible in some point of time.
Inside a computed property I would like to get the height of this component, but somehow getElementById does not work inside the computed property, even though it works as a method.
computedProp: function() {
let element = document.getElementById("prop-id")
let style = window.getComputedStyle(element)
return style.getPropertyValue("height")
},
element is undefined.
The DOM elements with their different changes are not reactive, so they will not trigger the computed property, but you could take advantage of MutationObserver
to watch any change in the observed element :
data: () => ({
computedPropHeight: 0,
observer: null,
}),
mounted() {
let element = document.getElementById("prop-id")
this.observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation) {
let style = window.getComputedStyle(element)
this.computedProp = style.getPropertyValue("height")
}
});
});
this.observer.observe(element, {attributes: true});
},
beforeDestroy(){
this.observer.disconnect()
}
I have created a table component which accept dynamic data (th, tr, td,...).
Table data (td) could be a dynamic component as below:
<td>
<component
:is="data.content"
:colspan="data.colspan"
v-bind="data.props"
v-on="data.events"/>
</td>
...
export default {
name: "DynamicTable",
props: {
...
isLoading : { // loading slot will be used if true
type: Boolean,
default: false
}
}
}
I feed required data in another component like this:
<other-html-elements/>
<dynamic-table
:table-heads="tableHeads"
:table-rows="tableRows"
:is-loading="isLoading">
...
computed: { ...
tableRows () {...
new TableData(CancelOrderButton, 'component', {
props: {
order
},
events: {
'updateLoadingStatus': this.updateLoadingStatus
}
})
...
methods: { ...
updateLoadingStatus (status) {
this.isLoading = status
}
and here is my CancelOrderButton:
methods: {
cancelOrder () {
this.$emit('updateLoadingStatus', true)
somePromise().finally(() => {
this.$emit('updateLoadingStatus', false)
})
once I click on a button and invoke the cancelOrder method, the updateLoadingStatus will be emitted without any problem. and after the promise settled, it will be emitted again. but the handler will not triggered.
I have checked everything. I'm sure that events are emitted. this problem will be fixed when I move the second emit statement out of the finally block or I if do not pass isLoading as a props for the dynamicTable.
Try setting the prop for that emit like this:
<dynamic-table
:table-heads="tableHeads"
:table-rows="tableRows"
#update-loading-status="updateLoadingStatus"
:is-loading="isLoading">
And calling that emit like this (although it should work as you have it):
this.$emit('update-loading-status', true)
Also you can define them in a general way and use them in the component you want:
https://v2.vuejs.org/v2/guide/custom-directive.html
So I have the following piss of code in my child component
props: {
prop_accounts: Array,
prop_pushing_destination: String,
prop_selected_account: String,
prop_selected: Boolean,
shop_settings: Object,
name_of_selected_account_field: String
},
data() {
return {
accounts: this._.cloneDeep(this.prop_accounts),
pushing_destination: this._.cloneDeep(this.prop_pushing_destination),
selected_account: this._.cloneDeep(this.prop_selected_account),
selected: this._.cloneDeep(this.prop_selected)
}
},
The parent props pass all the props and all seams to work well but the parent is constantly sampling the backend for changes and if they acquire it updates the props of child and although I can see that props are changed the data stays the same now if I throw the data and use props directly all works well but I get the following warning
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "selected_account"
There are two ways you could handle this: use the props directly and emit changes to the parent; or use computed properties to compute the value based on the data and props.
Emitting changes is probably what you want to do 99% of the time as any changes to the props either internal or external will change what your component is doing. Using computed props allows for changes to the props to be used only if the data hasn't been modified internally.
Computed props
props: {
defaultAccounts: Array,
defaultSelected: Boolean,
...
}
data: () => ({
customAccounts: null,
customSelected: null,
})
computed: {
accounts() {
return (this.customAccounts == null) ? this.defaultAccounts : this.customAccounts
},
selected() {
return (this.customSelected == null) ? this.defaultSelected : this.customSelected
}
}
You could even define setters on the computed props to set the value of the data properties.
Emit changes
Component:
props: {
accounts: Array,
selected: Boolean,
...
}
methods: {
accountsChanged(value) {
this.$emit('update:accounts', value)
},
selectedChanged(value) {
this.$emit('update:selected', value)
}
}
Where you use component:
<my-component :accounts.sync="accounts" :selected.sync="false"></my-component>
See Sync Modifier Documentation for more info.
I haven't tested this code so it may need tweaking to get it working correctly.
I have a parent component, on which I set a data property:
created() {
carModels()
.then(x => {
this.carModels= [{ value: null, text: 'None' }].concat(x);
});
},
carModels is a prop that is passed to child components.
Currently, the prop is passed to the child before it is set in the above code. I have looked for a solution, but I am missing something...how do I wait for it, or, update the child once it has loaded? Presumably a promise would do this?
As per the direction in the comment from #Niklesh Raut, I resolved the issue using a watch in the child:
watch: {
carModels: function (carModels) {
console.log(carModels);
}
},
How do I access $refs inside computed? It's always undefined the first time the computed property is run.
Going to answer my own question here, I couldn't find a satisfactory answer anywhere else. Sometimes you just need access to a dom element to make some calculations. Hopefully this is helpful to others.
I had to trick Vue to update the computed property once the component was mounted.
Vue.component('my-component', {
data(){
return {
isMounted: false
}
},
computed:{
property(){
if(!this.isMounted)
return;
// this.$refs is available
}
},
mounted(){
this.isMounted = true;
}
})
I think it is important to quote the Vue js guide:
$refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties.
It is therefore not something you're supposed to do, although you can always hack your way around it.
If you need the $refs after an v-if you could use the updated() hook.
<div v-if="myProp"></div>
updated() {
if (!this.myProp) return;
/// this.$refs is available
},
I just came with this same problem and realized that this is the type of situation that computed properties will not work.
According to the current documentation (https://v2.vuejs.org/v2/guide/computed.html):
"[...]Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed"
So, what (probably) happen in these situations is that finishing the mounted lifecycle of the component and setting the refs doesn't count as a reactive change on the dependencies of the computed property.
For example, in my case I have a button that need to be disabled when there is no selected row in my ref table.
So, this code will not work:
<button :disabled="!anySelected">Test</button>
computed: {
anySelected () {
if (!this.$refs.table) return false
return this.$refs.table.selected.length > 0
}
}
What you can do is replace the computed property to a method, and that should work properly:
<button :disabled="!anySelected()">Test</button>
methods: {
anySelected () {
if (!this.$refs.table) return false
return this.$refs.table.selected.length > 0
}
}
For others users like me that need just pass some data to prop, I used data instead of computed
Vue.component('my-component', {
data(){
return {
myProp: null
}
},
mounted(){
this.myProp= 'hello'
//$refs is available
// this.myProp is reactive, bind will work to property
}
})
Use property binding if you want. :disabled prop is reactive in this case
<button :disabled="$refs.email ? $refs.email.$v.$invalid : true">Login</button>
But to check two fields i found no other way as dummy method:
<button :disabled="$refs.password ? checkIsValid($refs.email.$v.$invalid, $refs.password.$v.$invalid) : true">
{{data.submitButton.value}}
</button>
methods: {
checkIsValid(email, password) {
return email || password;
}
}
I was in a similar situation and I fixed it with:
data: () => {
return {
foo: null,
}, // data
And then you watch the variable:
watch: {
foo: function() {
if(this.$refs)
this.myVideo = this.$refs.webcam.$el;
return null;
},
} // watch
Notice the if that evaluates the existence of this.$refs and when it changes you get your data.
What I did is to store the references into a data property. Then, I populate this data attribute in mounted event.
data() {
return {
childComps: [] // reference to child comps
}
},
methods: {
// method to populate the data array
getChildComponent() {
var listComps = [];
if (this.$refs && this.$refs.childComps) {
this.$refs.childComps.forEach(comp => {
listComps.push(comp);
});
}
return this.childComps = listComps;
}
},
mounted() {
// Populates only when it is mounted
this.getChildComponent();
},
computed: {
propBasedOnComps() {
var total = 0;
// reference not to $refs but to data childComps array
this.childComps.forEach(comp => {
total += comp.compPropOrMethod;
});
return total;
}
}
Another approach is to avoid $refs completely and just subscribe to events from the child component.
It requires an explicit setter in the child component, but it is reactive and not dependent on mount timing.
Parent component:
<script>
{
data() {
return {
childFoo: null,
}
}
}
</script>
<template>
<div>
<Child #foo="childFoo = $event" />
<!-- reacts to the child foo property -->
{{ childFoo }}
</div>
</template>
Child component:
{
data() {
const data = {
foo: null,
}
this.$emit('foo', data)
return data
},
emits: ['foo'],
methods: {
setFoo(foo) {
this.foo = foo
this.$emit('foo', foo)
}
}
}
<!-- template that calls setFoo e.g. on click -->