<script>
export default {
name: 'App',
data() {
return {
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'good'
},
{
name: 'bar',
checked: false,
status: 'worst'
},
{
name: 'baz',
checked: false,
status: 'good'
},
{
name: 'df',
checked: false,
status: 'bad'
},
{
name: 'apple',
checked: false,
status: 'worst'
}
]
}
}
}
</script>
//ListTwo.vue
<script>
export default {
name: 'App',
data() {
return {
getQuestionAnswers: [
{
name: 'vall',
checked: false,
status: 'good'
},
{
name: 'bara',
checked: false,
status: 'bad'
},
{
name: 'ssss',
checked: false,
status: 'bad'
},
{
name: 'ba',
checked: false,
status: 'worst'
},
{
name: 'df',
checked: false,
status: 'good'
},
{
name: 'ae',
checked: false,
status: 'good'
},
{
name: 'amm',
checked: false,
status: 'worst'
}
]
}
}
}
</script><template>
<div id="app">
<div
class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div :class="['container1', { red: group.name === 'bar' }]">
<input type="checkbox" v-model="group.checked" />
{{ group.name }}
</div>
<div class="container2">
<div class="h-line" v-if="group.checked">{{ group.status }}</div>
</div>
</div>
</div>
</template>As you can see in the output of above provided code, I have two section, one is left, right. Both are from different components, and data is different for both.
When click on "foo" from left side, Can I match the right side content status. and draw line (condition is like, whatever status is good draw the lines) is it is multiple also fine.
