<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.
I have modified the classNames and the styles. Also have added v-model for the input fields. Pls check the below working code
new Vue({
el: "#app",
data: {
getQuestionAnswers: [
{
name: 'foo',
checked: false
},
{
name: 'bar',
checked: false
},
{
name: 'baz',
checked: false
}
]
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
width:100%
}
.red {
color: red;
}
.bcom {
width: 100%;
display: flex;
}
.container1 {
width: 50px;
}
.container2 {
width: calc(100% - 105px);
padding: 8px 0;
height: 30px;
box-sizing: border-box;
}
.h-line {
height: 1px;
margin-bottom: 18px;
width: 100%;
background-color: black;
}
.container3{
margin-left: 5px;
width: 50px;
}
.point {
width: 6px;
height: 6px;
background: tomato;
border-radius: 3px;
transition: width 1s ease;
}
.point:hover {
width: 200px;
}<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<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"></div>
</div>
<div :class="['container3',{ 'red': group.name === 'bar' }]">
<input type="checkbox" v-model="group.checked"/>
{{ group.name }}
</div>
</div>
<div class="point"></div>
</div>