Блог

Главная - Вопросы по программированию - Onclick флажка как добавить прямую линию в Vuejs?

Onclick флажка как добавить прямую линию в Vuejs?

#javascript #vue.js #animation #canvas

#javascript #vue.js #Анимация #холст

Вопрос:

 <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» с левой стороны, могу ли я соответствовать статусу содержимого правой стороны. и нарисуйте линию (условие похоже на то, что любой статус хорош для рисования линий), это тоже хорошо.

Ответ №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>

Комментарии:

1. Я изменил код и сделал его внутри одного контейнера bcom . Теперь вы можете проверить отредактированный ответ

2. @Sundar Могу я узнать, почему вы не приняли ответ. Есть ли что-нибудь еще, с чем я мог бы вам помочь?

3. Как вы можете видеть, я повторяю один и тот же массив, поэтому оба флажка будут иметь одну и ту же метку. Итак, зачем нам здесь условие?

4. Вы добавили этот codebox в qsn и не обновили qsn. Итак, как люди узнают точное требование

5. Пожалуйста, добавьте изменения или, по крайней мере, ссылку codesandbox в qsn!

Метки: