I am trying to figure out how to re-render a list of name types. I want to ensure that only one name with type 0 (primary) exists at a time, so I want to enable/disable that option based on the number of names in my array with type 0.
<a v-for="type in names.types" v-bind:class="[canAddNameType(type) ? '' : 'disabled', 'dropdown-item']" href="#">
#{{ type.type }}
</a>
How can I make my list get re-rendered every time I add/remove a name?
Work directly with the nested data and bind to the key property for each item:
Template
<a v-for="type in types"
:key="type.type"
:class="[canAddNameType(type) ? '' : 'disabled', 'dropdown-item']" href="#">
#{{ type.type }}
</a>
Script
computed: {
types() {
return this.names.types
}
}
Related
I have a dynamically made object of facets.
An example of the data could be:
facets: {
type: ['type1', 'type2', 'type3'],
color: ['color1', 'color2']
}
I also have an empty object for filters.
I then loop over the facets object and make checkbox groups for each facet. I want the v-model to be filters."name of the facet", so: filters.type and filters.color. I do not know the names forehand. I tried using the key in a loop but that does not work.
My loop looks like this:
<li v-for="(facet, facetKey, facetIndex) in facets" class="filter-item">
<strong>{{ facetKey }}</strong>
<div v-for="(value, valueIndex) in facet" class="form__fieldset" :key="valueIndex">
<div class="form__field-wrap">
<input type="checkbox" v-model="filters[facetKey]" :id="value.toLowerCase().trim()" :value="value">
<label :for="value.toLowerCase().trim()">{{ value }}</label>
</div>
</div>
</li>
If I hardcode v-model to filters.type, It works as intended. Has anyone achieved this type of dynamic v-models?
Populate filters with your facets properties
filters = ref({
...facets.value
})
Here is the playground link to a working example
I am having a v-for loop in my vuejs application. i want each span to have a different class name. For example .spa0, .spa1, .spa3..... How do I do it using index in v-for loop?
I tried something like this:
:class="`spa${index}`"
Some of my code is:
<div>
<span v-for="(t, index) in table_data" :class="`spa${index}`">{{t}}</span>
</div>
I expect each span to have a different class.
If table_data is like this as you stated in the comments:
{
type: 'LDAP',
des: 'LDAP for Demo - Do not edit or delete this App',
api: 'show token',
scim: 'cloud.kapstonellc.com:8082/scim/v2/10VN44ZN',
endis: true,
act: true
}
You should probably iterate over table_data keys instead:
<div>
<span v-for="(key, index) in Object.keys(table_data)" :class="`spa${index}`">
{{ table_data[key] }}
</span>
</div>
I'm trying to use the vuedraggable component and to "nest" it.
I'm fetching data from one table, that fetches data from the second and the second from the third (you get the point). And the second and third table is the ones that I'm currently interested in being able to change the order of.
I have a column named order (yeah, should have chosen sorted_order or something else). But for the moment I'm having problems to "reuse" the mapping function. I don't want to different functions, that doesn't seem to be the right way of doing it..
So for the first one, it looks like this:
<draggable v-if="stacksData.length" :element="'ul'" v-model="stacksData" :options="{animation: 150, handle:'.handle'}" #start="drag=true" #end="drag=false" #change="update">
<li v-for="(stack, index) in stacksData">
<i class="fas fa-arrows-alt handle"></i> <button v-on:click="fetchQuestions(stack)" class="btn btn-primary btn-sm">{{ stack.name }} ({{ stack.question_count }}) (order {{ stack.order }})</button>
</li>
</draggable>
And the second one:
<draggable v-if="questionsData.length" :element="'ul'" v-model="questionsData" :options="{animation: 150, handle:'.handle'}" #start="drag=true" #end="drag=false">
<li v-if="questionsData.length" v-for="(question, index) in questionsData">
<i class="fas fa-arrows-alt handle"></i> {{ question.description }} (order {{ question.order }})
</li>
</draggable>
My "update" function, as it is just now:
update(event){
console.log(event)
this.stacksData.map((stacksData, index) => {
stacksData.order = index + 1
})
}
Expected result:
Be able to call the update function on any array containing column order and update the order of it.
Right now I trying to use draggable to build a kanban (with four columns). I started creating two columns to learn about vue-draggable, but I can't figure out how to access the column of task.
My first two columns:
<draggable v-model="myArray" class="simple-a"
:options="{group:'people'}" :move="onMove"
#start="changeDrag" #end="changeDrag"
#change="seeChange">
<div v-for="(element, aIndex) in myArray" :key="aIndex" class="element-a">
{{ element.name }}
</div>
</draggable>
<draggable v-model="myArray2" class="simple-a" style="background:red;"
:options="{group:'people'}" :move="onMove" #start="changeDrag"
#end="changeDrag" #change="seeChange(1)">
<div v-for="(element2, aIndex) in myArray2" :key="aIndex" class="element-a">
{{ element2.name }}
</div>
</draggable>
I am using seeChange function to get which element has changed:
seeChange({moved, added, removed}, col) {
if(added){
console.log(added);
console.log('column: '+col);
}
if(moved){
console.log(moved);
}
if(removed){
console.log(removed);
}
}
As you can see I'm trying to pass col attribute to this function (change event), but I can't, is always undefined.
How can I pass an attribute to a change event of vue draggable ?
Or how is the correct/better way to get the new column of a edited item?
The syntax you need to pass additional parameters to an event handler is
template
<draggable ... #change="seeChange($event, 1)">
...
</draggable>
component
methods: {
seeChange(event, col) {
console.log(event, col)
...
}
},
Ref: Passing event and argument to v-on in Vue.js
I'm generating a list of multiple input elements in which one is <el-select>. On changing this select menu, I'm getting value bounded with that select. But here, question is, I also want to get index/row number of the parent v-for items.
You can understand what I meant from the following code:
<el-form-item v-for="(domain, index) in Prescription.domains">
<div class="col-md-2" v-if="medicineIsSelected === true">
<small>Select Brand:</small>
<el-select v-model="domain.SelectedBrand" clearable placeholder="Select" #change="updateDropdowns"> <!-- Here I want to pass {{index}} also -->
<el-option
v-for="item in selectedMedicineMetaInfo.BrandName"
:key="item.value.name"
:label="item.value.name"
:value="item.value.rxcui">
</el-option>
</el-select>
</div>
</el-form-item>
As you can see from above code, I want to pass index in updateDropdowns.
I tried passing updateDropdowns(index), here I got the index number but lost the selected value of that dropdown. How can I pass both?
Here is the solution :
#change="updateDropdowns(index, $event)"
you can use $event to reference current event.
you can use custom event to manage this
<div>
<child #clicked="ongetChild"></child>
</div>
== child ==
watch your dropdown changes
export default {
watch: {
'domain.SelectedBrand':function(value) {
this.$emit('clicked', 'value')
}
}}
=== parent ==
export default {
ongetChild (value) {
console.log(value) // someValue
}
}
}
Use #change="updateDropdowns" in el-select tag
Use vue method:
updateDropdowns(index) {
this.selectedMedicineMetaInfo.BrandName[index-1]; // this gives selected option details
}