<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>Como puede ver en el resultado del código proporcionado anteriormente, tengo dos secciones, una a la izquierda, una a la derecha. Ambos son de diferentes componentes, y los datos son diferentes para ambos.
Cuando haga clic en "foo" desde el lado izquierdo, ¿puedo hacer coincidir el estado del contenido del lado derecho? y dibujar la línea (la condición es como, cualquier estado es bueno, dibujar las líneas) si es múltiple también está bien.
He modificado los classNames y los estilos. También he agregado v-model para los campos de entrada. Por favor, compruebe el siguiente código de trabajo
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>