Onclick复选框如何在Vuejs中添加直线？

Question

<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>

正如您在上面提供的代码的输出中看到的那样，我有两个部分，一个是左，一个是右。两者都来自不同的组件，两者的数据也不同。

当从左侧点击“foo”时，我可以匹配右侧的内容状态吗？和画线（条件是这样的，无论状态好画线）是不是多重也可以。

Answer 1

我已经修改了类名和样式。还为输入字段添加了v-model。请检查以下工作代码

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>