I'm trying to do what I would think is rather simple, but I can't seem to find a built-in way to do it. Basically, I have several divs on a page that are using v-if conditions which are acting as filters for data on the page (think about a table with data that is then filtered by select boxes)
Below is a very simplified example, but basically, I'm wanting to set a variable in my data object once a v-if condition is satisfied. Then, if filters change and make a different v-if condition satisfied it would set the same variable to a different value.
I basically want a value that can be changed based on any filters on my page, as long as I have a way to set that value after any given v-if is satisfied.
I was hoping to be able to simply call a method (with an argument passed) once v-if resolved is possible
var vm = new Vue({
el: "#app",
props: {
},
data: {
showData: 'ABC',
specificData: "here are some specifics",
newValue: ''
}
});
<div id ="app">
<div v-if="showData === 'ABC'">
<!--Here, I want to set newValue to something like 'ROGER' unrelated to ABC-->
ABC
</div>
<div v-if="showData === '123'">
<!--Here, I want to set newValue to something like 'SAM' unrelted to 123-->
123
</div>
</div>
This kind of business logic should not be handled in template, but rather in a computed property. The most basic setup would look like:
data(){
return {
showData: "ABC"
}
},
computed: {
newValue(){
if (this.showData === "ABC") {
return "Some derived value"
}
return ''
}
}
Alternatively, you can use a watcher on showData, and call additional methods when any of the conditions are met.
watch: {
showData(val){
if (val === "ABC") {
this.newValue = "Some derived value"
this.someOtherMethod()
}
// Any other conditions to be checked
// or simply pass the value further to a method where all the checks are done
this.checkValue(val)
}
}
Related
I'm trying to change the id of an image after the user clicks on a button. Initially, the id of the element should be B0_h, but after the user clicks on a button, a value in an array should change to true. Initially all the array values are false, but once the value of the element in the array becomes true, the id should change to B0_v.
Using the Vue dev tools, I noticed that the value in the array is changing as expected, however, v-bind can't detect this change. From the v-bind perspective, the value of B[0] is still false. As a result, the id is still B0_h.
Here's my template:
<template>
<div>
<button type="button" id="button0" v-on:click="toggle('B0')"></button>
<img src="../assets/img1.png" alt="A" v-bind:id="[A[0] === true ? 'A0_v' : 'A0_h']" >
<img src="../assets/img2.png" alt="B" v-bind:id="[B[0] === true ? 'B0_v' : 'B0_h']">
</div>
</template>
Here's my script:
<script>
export default {
name: 'Demo',
props: {},
data: function(){
return{
A: [false,false,false,false,false,false,false,false,false],
B: [false,false,false,false,false,false,false,false,false],
playerTurn: true;
}
},
methods:
{
toggle(x)
{
if(x == 'B0' && this.playerTurn)
{
this.B[0] = true;
}
}
}
}
</script>
Any idea what I'm doing wrong in here?
This is due to the handling of changes by Vue in arrays and objects. Vue won't track the change you're making. For this purpose it offers a special method: set. It takes 3 arguments: the array (or the object) that has to be changed, the index, and the value that should be set.
In your example it'll look like this:
Vue.set(this.B, 0, true);
Put this line instead of:
this.B[0] = true;
For more information please check the official documentation. This is a short excerpt:
Vue.set( target, propertyName/index, value ) Arguments:
{Object | Array} target
{string | number} propertyName/index
{any} value
Returns: the set value.
Usage:
Adds a property to a reactive object, ensuring the new property is
also reactive, so triggers view updates. This must be used to add new
properties to reactive objects, as Vue cannot detect normal property
additions (e.g. this.myObject.newProperty = 'hi').
I have computed property in my data this.coinPairingOptions that needs to render its radio buttons based on some of the other fields in this schema. I have reduced the amount of code in the file to save space.
data: function () {
return {
schema: {
{model: "symbolPair", type: "radios", label: "Pair with", values:
this.coinPairingOptions, required: true}
},
computed: {
coinPairingOptions() {
console.log("computing coinPairingOptions")
let coin = this.model.symbol.toUpperCase();
let options = [];
if (this.model.exchange === 'Coinbase') {
options = this.getCoinbasePairs
} else if (this.model.exchange === 'Binance') {
options = this.getBinancePairs
} else {
}
console.log(options.get(coin));
return options.get(coin);
},
}
In the dev tools I can see the computed property changing to the correct values however it is not changing in the data. Apparently, this is appropriate behavior, but what is a way around this? I have tried putting {{this.coinPairingOptions}} in the html and it errors because it's a computed property with not value initially.
Any help would be appreciated!
You can't use computed property in data, because data evaluates before the computed properties did.
You can use a watcher to achieve the intended result. Have a look at the documentation, you can add the argument immediate to trigger the callback immediately with the current value of the expression.
Computed properties are already accessible in the template by using {{}}. You don't need to put a this in front of the computed.
I am trying to dynamically create/remove a Vue component. I have figured out how to dynamically add the component, but I am having some troubles with allowing the users to remove the specific component.
Consider below two Vue files:
TableControls.vue
<a v-on:click="addColumn">Add Column</a>
<script>
export default {
methods: {
addColumn: function () {
Event.$emit('column-was-added')
}
}
};
</script>
DocumentViewer.vue:
<div v-for="count in columns">
<VueDragResize :id="count">
<a #click="removeColumn(count)">Remove Column</a>
</VueDragResize>
</div>
<script>
import VueDragResize from 'vue-drag-resize';
export default {
components: {
VueDragResize
},
data() {
return {
columns: [1],
}
},
created() {
Event.$on("column-was-added", () => this.addColumn())
},
methods: {
addColumn: function () {
this.columns.push(this.columns.length + 1)
},
removeColumn: function (id) {
this.columns.splice(id, 1)
}
}
};
</script>
As you can see, whenever a user clicks on <a v-on:click="addColumn">Add Column</a>, it will submit an event, and the DocumentViewer.vue file will pick up it, firing the addColumn method. This will ultimately create a new <VueDragResize></VueDragResize> component.
This works great.
The problem is when I want to remove the component again. My removeColumn method simply removes an id from the columns array:
removeColumn: function (id) {
this.columns.splice(id, 1)
}
This results in that a column is in fact removed. However, consider below example. When user clicks on the remove icon for the first column, it will remove the 2nd column instead. (And when there is only one column present, it cannot be removed).
I believe this is due to the fact that I splice() the array, but I cannot see how else I can remove the component dynamically?
I see, Array on Vue does not re render when you modify them.
You need to use the
Vue.set(items, indexOfItem, newValue)
if you want to modify
and use
Vue.delete(target, indexOfObjectToDelete);
If you want to delete an item from an array
You may read the additional info here
https://v2.vuejs.org/v2/api/#Vue-delete
If you want to delete an item from array. Using this will cause the component to rerender.
In this case it will be intuitive to do this
removeColumn: function (id) {
Vue.delete(this.columns, id)
}
Note that id should be the index. Vue.delete ensures the re-render of the component.
EDIT, you must use the index, instead of the count here.
<div v-for="(count, index) in columns">
<VueDragResize :id="index">
<a #click="removeColumn(index)">Remove Column</a>
</VueDragResize>
</div>
I would recommend reshaping your data, each element should be an object with an id and whatever other properties you want. Not simply an id then you would need something like this:
removeColumn(id) {
const elToRemove = this.columns.findIndex(el => el.id === id)
let newArr = [elToRemove, ...this.columns]
this.columns = newArr
}
Also make another computed property for columns like this to make sure they change dynamically (when you add/remove):
computed: {
dynColumns(){ return this.columns}
}
I have same problem, and I found the solution of this problem. It is need to set #key with v-for. This is Built-in Special Attributes.
By default, if you do not set "#key", array index is set to#key. So if array length is 3, #key is 0,1,2. Vue identify eash v-for elements by key. If you remove second value of array, then array index is 0 and 1, because array length is 2. Then Vue understand that #key==2 element removed, So Vue remove 3rd component. So if you remove second value of array, if no #key, third component will be removed.
To avoid this, need to set #key to identify component like this:
let arr = [
{ id: 'a', ...},
{ id: 'b', ...},
{ id: 'c', ...}
];
<div v-for="obj in arr" :key="obj.id">
<someYourComponent>
...
</someYourComponent>
</div>
I have a very simple Laravel /Vue js website, I have a list of product which I would like to filter.
const app = new Vue({
el: '#main-content',
data: {
forfaits: window.forfaits,
},
methods: {
filterData: function (val) {
console.log(val)
this.forfaits = this.forfaits.filter(item => {
return item.internet >=val[0] && item.internet <= val[1] ;
});
return this.forfaits;
}
HTML
<div class="product-item offre" v-for="forfait in forfaits">
.....
.....
.....
In this case it works but the original product array (forfaits) is mutated.
How can I filter without mutating the original value?
You want to have two properties:
A source-of-truth property with all unfiltered items, which is never consumed by the UI.
A computer property with the actual list to display, which at any point will return the complete list if there is no filter, or a filtered list if there is a filter. This is what you bind the UI to.
You don't need any methods; the computed property will automatically update as the filter changes.
Here is the html:
<select style="width: 100%;" ng-model="vm.orgType" ng-model-options="{getterSetter: true}" ng-options="orgType as orgType.ORGANIZATION_TYPE for orgType in vm.orgTypes">
</select>
and here is the getter/setter function:
function orgType(selectedType) {
if (arguments.length == 0)
return orgType.selectedOrgType || { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };
orgType.selectedOrgType = selectedType;
if (selectedType.ORGANIZATION_TYPE_ID) {
if (vm.registrant.StakeholderOrgs[0])
vm.registrant.StakeholderOrgs[0] = selectedType.ORGANIZATION_TYPE_ID;
else
vm.registrant.StakeholderOrgs.push(selectedType.ORGANIZATION_TYPE_ID);
}
else
vm.registrant.StakeholderOrgs.splice(0);
}
the following line:
return orgType.selectedOrgType || { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };
throws the infinite digest loop error.
Let me explain what I am trying to do here. I need to push the id onto a list if there is a selection made. I realize that I could just do an ng-model on some variable selectedOrgType and then just put my logic in an ng-change. However, I am trying to make a dropdown that does not create any unnecessary model variables. Instead, I was hoping to just put the logic in a getter/setter, that seems more appropriate to me. One of vm.orgTypes is { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }, I was hoping that would be my default value instead I get this digest error, don't understand where it is coming from.
When you add ng-model attribute, angular add internal watch, that check value on every digest loop, and if value changed - run digest again.
In you case you return object literal. In javascript when you compare two literals, even with same structure - you get false
({a:1} == {a:1}) // false
because this really two different object.
So, when you return object literal in your getter, watch check it with previous value, and, as i say above, if you return literal - get false
So you get your error with infinite digest.
For solving you just need return same object.
If you have this object inside array, like
vm.orgTypes=[
{ ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }
];
So you just need use it directly:
return orgType.selectedOrgType || orgTypes[0];
Yer another way: just save default falue to varible and use it
var defaultSelect = { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };
....
function orgType(selectedType) {
if (arguments.length == 0)
return orgType.selectedOrgType || defaultSelect;
In this case you would return same element in default case, so avoid infinite digest loot.