I'm facing a confusing issue where I am unable to manipulate the title of a dynamically added element independently. The title seems to change for all elements created in the process.
What I am aiming for is to be able to call multiple components and manipulate the title of a specific one without affecting others.
In my scenario, Vuex correctly receives the indexes of detail goals, so it's puzzling why the DG_TITLE_MUTATION mutation is causing all detail goal names to change. Even when I retrieve an object from the server with two detail goals and modify their names as desired, the problem persists with new elements created during the session.
I am stuck here and would really appreciate some help.
The first component with a v-for directive below adds and displays the problematic components:
<template>
<q-btn icon="add" label="add detail goal" @click="addDetailGoal"/>
<q-list v-for="(detailGoal, index) in $store.state.documents[0].document.content.mainGoal.detailGoals" :key="index" :name="index">
<goals-details :thisIndex="index"/>
</q-list>
</template>
<script lang="ts">
//jj. Main import
import { defineComponent} from 'vue';
//jj. Components
import GoalsDetails from './GoalsDetails.vue';
//jj. Store
import { useStore } from 'src/store';
//jj. types
import { detailGoal } from './models'
export default defineComponent({
name: 'NewDocument',
components:{
GoalsDetails
},
props:{
grantObj:{
type: Object
},
},
setup() {
//jj. main settings
const store = useStore()
//jj. This is part pushed to main object when user use add main goal btn
const detailGoal:detailGoal= {
id:'',
title:'New detail goal',
description:'',
quote:'',
tasks:[],
};
//jj. Add addDetailGoal
function addDetailGoal(){
store.commit('ADD_DETAIL_GOAL', detailGoal)
}
return {
//jj. functions
addDetailGoal,
};
},
})
</script>
Below is the component with the title to be manipulated, with an input connected to a mutation function:
<template>
<q-btn icon="delete" label="delete" @click="removeDetailGoal" class="bg-purple text-white"/>
<q-input v-model="detailGoalTitle" label="Project title" class="q-ml-sm"/>
<script lang="ts">
//jj. vue
import { defineComponent, ref, computed} from 'vue';
//jj. components
import ProjectTasks from 'components/ProjectTasks.vue'
//jj. types
import { task } from './models'
//jj. Store
import { useStore } from 'src/store';
export default defineComponent({
name: 'GoalsDetails',
props:{
thisIndex:{
type: Number
},
},
components:{
ProjectTasks,
},
setup(thisIndex) {
const store = useStore()
// *******************************************************************************************
// jj. DETAIL GOAL SECTION
// *******************************************************************************************
//jj. Edit detail goal title
let detailGoalTitle = computed({
get: () => {
if(store.state.documents && typeof thisIndex.thisIndex == 'number'){
return store.state.documents[0].document.content.mainGoal.detailGoals[thisIndex.thisIndex].title}else{
return 'no document'
}},
set:( val ) => store.commit('DG_TITLE_MUTATION', {val, thisIndex})
})
function removeDetailGoal(){
store.commit('REMOVE_DETAIL_GOAL', thisIndex.thisIndex)
}
// *******************************************************************************************
// jj. TASKS SECTION
// *******************************************************************************************
//jj. This is part pushed to main object when user use add main goal btn
const taskTemplate:task= {
id:'',
title:'New Task',
results:[]
};
//jj. Add Task
function addTask(){
console.log(thisIndex.thisIndex);// this is proper index
store.commit( 'ADD_TASK', {taskTemplate, thisIndex} )
}
return {
//jj. detail goal section
detailGoalTitle,
removeDetailGoal,
};
},
})
</script>
The Vuex mutations:
//jj. Add next detailGoal
ADD_DETAIL_GOAL(store, detailGoal: detailGoal){
if(store.documents){store.documents[0].document.content.mainGoal.detailGoals.push(detailGoal)}
},
//jj. Edit detail goal title
DG_TITLE_MUTATION( store, {val, thisIndex}:{val:string, thisIndex:{thisIndex:number}}){
if(store.documents){store.documents[0].document.content.mainGoal.detailGoals[thisIndex.thisIndex].title = val
}
},