I can't seem to find anything stating a way to use the # src alias inside of a computed property. Is this possible?
I would like to dynamically assign an img src based on the component type. But computed property will only return back the literal string value.
computed: {
dynamicImgSrc() {
return '#/assets/icons/myImage.svg';
}
}
Use require for relative path imports in javascript
return require('#/assets/icons/myImage.svg')
Related
There are couple of questions related computed properties like the following
"vuejs form computed property"
"Computed properties in VueJs"
"computed property in VueJS"
"Use computed property in data in Vuejs"
They are asking about specific error or logic. There are lot of websites that are explaining about vuejs related concepts. I read about computed properties on vuejs official website. When we do complex calculations or want to avoid to write more logic in our html template then we use computed properties.
But could not get any solid understanding about computed properties, when it calls, how it calls, what exactly do?
TL;DR: Computed properties are getters/setters in Vue.
When defined in the shorthand form, they are getters:
computed: {
someComputed() {
return `${this.foo} ${this.bar}`;
}
}
is equivalent with
computed: {
someComputed: {
get: function() {
return `${this.foo} ${this.bar}`;
}
}
}
which can also have a setter:
computed: {
someComputed: {
get: function() {
return `${this.foo} ${this.bar}`;
}
set: function(fooBar) {
const fooBarArr = fooBar.split(' ');
this.foo = fooBarArr[0];
this.bar = fooBarArr[1];
}
}
}
In short, Vue computed properties allow you to bind an instance property to
a getter: function run when you look up that property; usage:
this.someComputed // returns the computed current value, running the getter.
a setter: function run when you attempt to assign that property; usage:
this.someComputed = value; // sets the computed current value, running the setter.
Read more on getters and setters in Javascript.
And here's the documentation on Vue computed properties.
You can use computed properties when for example you have some logic what will blow up your template.
The idea is, that normally you want to keep all javascript logic in the javascript side of your vue component, and only access final data in your data (if possible)
For that you can use computed props, which normally are doing simple things like:
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
Or an another good example if you have some currency and you want to format it with thousand separator and euro ign at the end.
Then you can access your computed prop in the template like you access a normal prop, you dont have to call it as a function.
like so:
<div>{{reversedMesage}}</div>
Every time, when any variable what is used in your conputed prop is changing, vue vill take care of it and will re-calculate your computed property again.
Lets say you have the following:
computed: {
prettyAmount: function () {
return this.amount + ' ' + this.currency.toUpperCase()
}
}
<div>{{prettyAmount}}</div>
Whenever currency or amount changes, the output of prettyAmount will be changed as well.
The problem is that I can't pass dynamic Pug variables to Vue component via attributes, if they're of "String" type. Vue considers the string that I'm trying to pass as a name of Vue property.
The problem
template.pug
- var pugVariable = 'John';
my-component(v-bind:name= pugVariable)
*MyComponent.Vue*
export default {
name: 'MyComponent',
props: {
name: {
type: String
}
}
}
I get an error: "Property or method "John" is not defined on the instance but referenced during render.", which means, as far as I understand, that Vue considers string that is in pugVariable as a name of Vue property.
The question
So, the question is: now to persuade Vue to treat this variable as a string?
What I've already tried:
I tried to pass an object literal instead of string, as follows:
my-component(v-bind:name= {value: pugVariable})
It works, but we lose the ability to check the type of passed value, so I don't like this solution.
I've got an answer earlier that whoever:)
As described here https://stackoverflow.com/a/45175556/7473709, in case if we want just to pass static string, we have to simply get rid of v-bind: prefix, so it looks like as follows:
my-component(name= {value: pugVariable})
If I bind a class:
:class="['string-class', {'test-case-class': true}]
It will add both of the classes above, but how can I evaluate the above to a string form. I need to do this as a third party component I am using only accepts strings for a class property.
Edit
I want the above to be able to output: 'string-class test-case-class' just as you would see on a component that :class would be on.
You can bind the class to a function, rather than literals. For instance:
:class="getClasses"
where the function is computed:
computed: {
getClasses: function() {
return 'string-class test-case-class'
},
You can then use it just like any other computed function:
{{ getClasses }}
Should show the string literal 'string-class test-case-class'.
I have a code like this:
<button
#click="addFieldRow"
:disabled="disableAddRow"
>
disableAddRow is a computed property like this:
disableAddRow() {
if (this.currentIndex !== null) {
return !this.fieldList[this.currentIndex].filterApplied;
}
if (this.currentIndex === null && this.fieldList.length === 1) {
return true;
}
return false;
}
Works as it should, but on my console log, I get the following warning:
[Vue warn]: Computed property "disableAddRow" was assigned to but it
has no setter.
I don't get why I need a setter? And if I do need a setter, I don't understand what I need to set...
Thank you for your time and help!
That warning is indicating that, somewhere in your code, you are assigning a value to your disableAddRow computed property.
The code you shared wouldn't cause that warning, so you must be inadvertently assigning it a value somewhere else. You simply need to not set the value of the computed property and you won't get that warning anymore.
For a little more context: computed properties, by default, retrieve the value returned by the defining function. It is, however, possible to define setters for computed properties as well (which is what the warning is alluding to).
When trying to expose the topMargin as alias in the root component I get the following error:
Invalid alias target location: topMargin
The code is the following:
import QtQuick 2.6
Item {
id: root
property alias textTopMargin: description.anchors.topMargin
Text {
id: description
}
I can't find any information in the documentation about aliases and anchors, it is forbidden?
EDIT:
Seem that is caused by this: https://bugreports.qt.io/browse/QTBUG-65011
EDIT2:
The bug has been closed as invalid, the reason seems that is documented here:
https://codereview.qt-project.org/c/qt/qtdeclarative/+/215724
My reasoning for why it does not work (I don't have proof)
Let's assume you have the following:
// SomeObject.qml
QtObject {
property int someProperty: 5
}
// SomeItem.qml
Item {
property SomeObject someObject: SomeObject {}
}
Now you have the second Item:
// SomeOtherItem.qml
Item {
property alias someProperty: smeItm.someObject.someProperty
SomeItem {
id: smeItm
}
}
And now you somewhere set a new SomeObject to smeItm.someObject, what will be aliased? The original SomeObject or the new? If you would alow arbitrary chains, you would need to make sure that the reference stays valid and does not change.
From the documentation:
Unlike an ordinary property, an alias can only refer to an object, or the property of an object, that is within the scope of the type within which the alias is declared. It cannot contain arbitrary JavaScript expressions and it cannot refer to objects declared outside of the scope of its type.
That is not completely obvious, but you can read it as: A alias expression has one of those forms:
objectId
objectId.propertyName