dima-piligrim
@dima-piligrim
Начинающий веб-разработчик.

Как во vue связать select и checkbox?

5d8cd4aaaf1c1011998920.jpegЕсть проект на vue и node. Есть страница на которую из компонента выводиться список товара. В компонент они динамически поступают с базы данных mongoo. Мне необходимо сделать, чтобы при выборе option: 5 блюд выделялось чекбоксами первых пять блюд, при выборе option 3 выделялось соответственно 3.
В Выводятся порядковые номера, т.е. 1,2,3 и т.д
Вот сам код страницы:
<template>
  <div>
<div class="container content">
    <div class="row">
      <div class="col-md-12 menu-header">
        <h1 ref="heading">Меню на неделю  
    </h1>
        <p>Доставка возможна 
   </p>
      </div>
    </div>
   </div>
<div class="menu-nav"> 
<div class="container">
    <div class=" row">
      <div class="col-md-12">
      <div class="col-md-4">
    <select v-model="bludo">
         <option>5 блюд</option>
         <option>3 блюда</option>
    </select>   
        <select>
         <option :v-model="pers2">2 персоны</option>
         <option :v-model="pers4">4 персоны</option>
        </select>
    </div>
    <div class="col-md-4"> <span class="prise-filtr">Общаяя стоимость:</span> <span class="prise-summ"> {{sumPrise}} ₽</span> </div>
    <div class="col-md-4">   <el-button type="success" round style="padding:12px 50px;">оформить заказ</el-button></div>
    </div>
  </div>
  </div>
</div>

 <div class="container menu_full">  
  <div class="row">
    <ul>  
    <app-post v-for="post in posts" :key="post._id" :post="post"/>
    </ul>
     </div>
  </div>
  </div>
</template>

А это код компонента:
<template>
<li>
<div class=" col-md-4">
 <el-card  shadow="hover" :body-style="{padding:0}" :v-model="product"class="post">
 
 <a href="#" @click="openProduct" round><img :src="post.imageUrl" alt="post image" class="product-img"></a>
      
<label class="mycheckbox">
    <input class="mycheckbox__default" type="checkbox" v-model="productcek">
    <div class="mycheckbox__new"></div>
    <div class="mycheckbox__descr"></div>
</label>
 <div class="product-body">
 <a href="#" @click="openProduct" round><h4 class="product-title">{{post.title}}</h4></a>
 <div class="btn-product">
 <input v-model.number="post.prise" >
 <input v-model.number="post.namber" style="display:none"> 
 </div>
 </div>
 </el-card>
 </div>
</li>
</template>


Буду рад любой помощи. Просьба не пинать сильно. Я только знакомлюсь с vue Заранее благодарен
  • Вопрос задан
  • 176 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы