Is there a way to update property the same way as Vue.delete is used?
I have this method:
let element = event.target
let url = '/admin/services/changePriorityStatus/' + element.dataset.id
this.$dialog.confirm('Are you sure you want to change priority status of this service?',{
loader: true
}).then((dialog) => {
axios.post(url, {
id: element.dataset.id,
priority: element.dataset.priority
})
.then((response) => {
let data = response.data
dialog.close()
let serviceIndex = this.services.findIndex(service => serviceID)
Vue.delete(this.services, serviceIndex);
Event.$emit('message:show', {
messageTitle: data.messageTitle,
messageText: data.messageText
}, data.class)
})
.catch((error) => {
alert('Something went wrong. Please try again a bit later')
dialog.close()
})
})
.catch(() => {
console.log('Changing status canceled')
});
I want to replace Vue.delete with some global update method if it is possible. Is there a way to do this?
Yes with Vue.set. However, it's only needed when adding a new property to an object, not when updating an already reactive property.
See https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats for more information:
Change Detection Caveats
Due to the limitations of modern JavaScript (and the abandonment of
Object.observe), Vue cannot detect property addition or deletion.
Since Vue performs the getter/setter conversion process during
instance initialization, a property must be present in the data object
in order for Vue to convert it and make it reactive.
Vue does not allow dynamically adding new root-level reactive
properties to an already created instance. However, it’s possible to
add reactive properties to a nested object using the Vue.set(object, key, value) method.
Related
I receive an error when I load the page
My code looks like this :
<script>
methods: {
getPicture() {
var base = this;
axios
.get("http://localhost:3000/pictures/" + this.username)
.then(function (response) {
const { pictureData } = response.data;
base.studentImage = "data:image/jpg; base64," + pictureData;
console.log(base.studentImage);
});
},
}, //END OF METHOD
</script>
I want to display image in My front end. Where do I make a mistake ? Thank you in advance.
Welcome to Stack Overflow!
Sadly, I can't comment on this for more clarity, so my response has to be an answer.
This error occurs because the DOM and/or Vue Instance and/or Template uses the value "studentImage" before it is made available or defined incorrectly.
I recommend removing the variable "base" because Vue is very picky with its use of "this," so you usually wanna stay away from explicitly assigning "this" to a variable. As commented by Estus Flask below, this even applies to common JS. Check here for more information on referring to the correct "this" in JS.
Honestly, from what I can see with the code you've shared, that's likely the cause of your error. You'll want to define "studentImage" within your data object so Vue is aware of its existence.
Here is an example:
data: () => ({
studentImage: '',
}),
methods: {
getPicture() {
axios
.get("http://localhost:3000/pictures/" + this.username)
.then(function (response) {
const { pictureData } = response.data;
this.studentImage = "data:image/jpg; base64," + pictureData;
console.log(this.studentImage);
});
},
},
If it is not, then you'll want to make sure you're checking for "studentImage" before using it within the instance and or calling the method "getPicture," in the appropriate lifecycle.
I'm answering this assuming you're using the latest version of Vue, version three.
If this helps, please let me know!
This code is from a VueMastery course, which must be outdated:
export default {
setup(props, {emit}){
let email = props.email;
let toggleRead = () => {
email.read = !email.read
axios.put(`http://localhost:3000/emails/${email.id}`, email)
}
...
It gives this error:
71:9 error Getting a value from the `props` in root scope of `setup()` will cause the value to lose reactivity vue/no-setup-props-destructure
Note that I am not dealing with const here. What is the correct way to make a prop value reactive in Vue 3?
This warning is caused by linter rule that is supposed to improve code quality. If it's known that a prop isn't changed during the lifetime of component instance, it can be disabled.
The problem here is that the code mutates a prop, which is considered a bad practice and can trigger another warning.
For one-way change of prop value, i.e. a parent is unaware of it:
const toggleRead = () => {
const email = { ...props.email, read: !email.read };
axios.put(`http://localhost:3000/emails/${email.id}`, email)
}
For two-way change:
const toggleRead = () => {
...
emit('emailUpdate', email);
}
A parent should listen to emailUpdate event and update its state accordingly.
I have standard Vue.js component and I'd like to convert attributes in data property to watcher or in other words I want to construct a watch object based on data property attributes automatically
my idea looks something like this
watch: {
...(() => {
const watchers = {}
Object.keys(this.$data).forEach(key => {
watchers[key] = () => {
new ProductNutrientUpdate(this).run()
}
})
return watchers
})(),
},
the problem with this approach is that this.$data is not constructed yet
maybe there is some way how I can add watchers in created hook for example??
Vue already watches properties of the data object (note if any of these values are themselves objects, I think you need to update the whole object, i.e. change its value to a shallow copy with the desired nested key-values).
Refer to: https://v2.vuejs.org/v2/guide/reactivity.html
You can then use the update lifecycle hook to watch for all changes to data: https://v2.vuejs.org/v2/api/#updated
I was able to resolve a challenge using the following approach
created() {
Object.keys(this.$data).forEach(key => {
this.$watch(key, function() {
// ... some logic to trigger on attribute change
})
})
}
I have a component whose purpose is to display a list of items and let the user select one or more of the items.
This component is populated from a backend API and fed by a parent component with props.
However, since the data passed from the prop doesn't have the format I want, I need to transform it and provide a viewmodel with a computed property.
I'm able to render the list and handle selections by using v-on:click, but when I set selected=true the list is not updated to reflect the change in state of the child.
I assume this is because children property changes are not tracked by Vue.js and I probably need to use a watcher or something, but this doesn't seem right. It seems too cumbersome for a trivial operation so I must assume I'm missing something.
Here's the full repro: https://codesandbox.io/s/1q17yo446q
By clicking on Plan 1 or Plan 2 you will see it being selected in the console, but it won't reflect in the rendered list.
Any suggestions?
In your example, vm is a computed property.
If you want it to be reactive, you you have to declare it upfront, empty.
Read more here: reactivity in depth.
Here's your example working.
Alternatively, if your member is coming from parent component, through propsData (i.e.: :member="member"), you want to move the mapper from beforeMount in a watch on member. For example:
propsData: {
member: {
type: Object,
default: null
}
},
data: () => ({ vm: {}}),
watch: {
member: {
handler(m) {
if (!m) { this.vm = {}; } else {
this.vm = {
memberName: m.name,
subscriptions: m.subscriptions.map(s => ({ ...s }))
};
}
},
immediate: true
}
}
Vue.component('config_input', {
template: '#config-input-template',
data() {
paterns: []
},
computed: {
testData() {
return this.paterns;
}
},
mounted() {
var self = this;
axios.get('/listPatern').then(function (response) {
self.paterns = response.data;
}
},
});
In the console show testData is an empty array. It means that inside success ajax request function the 'paterns' value didn't update yet.
Can anybody show me how to assign data response to 'paterns' value?
I have tried using axios for ajax in vue.
Unfortunately I wasted 3 hours because it did not matter what code I tried, the data was simply not being initialized.
I resorted to vue-resource and my code was working the first time!
Include the vue-resource library and change your mounted method like so:
mounted() {
var self = this;
this.$http.get('/listPatern').then(function (response) {
self.paterns = response.data;
}
}
You could read VueJS Tutorials carefully.
When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty. This is an ES5-only and un-shimmable feature, which is why Vue doesn’t support IE8 and below.
The getter/setters are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified. One caveat is that browser consoles format getter/setters differently when converted data objects are logged, so you may want to install vue-devtools for a more inspection-friendly interface.
The reactive data which VueJS do something like "proxy",thus you couldn't assign to value in Object.
// Wrong
self.paterns = response.data;
// Right
self.someObject = Object.assign({}, self.someObject, response.data)
And data should be a Object
data: {
patterns: []
}