vue.js如何将点击的类绑定到v-v创建的列表项以利用模板组件？

1 回答

• 2

  你需要做这样的事情：

  console.clear()
  
  Vue.component('delivery-options', {
        props: ['deliveries', "isActive"],
        template: `<li @click="$emit('set-active', deliveries)" :class="{active: isActive}"><p><strong>{{ deliveries.price }}</strong>{{ deliveries.title }}</p><p>{{ deliveries.desc }}</p></li>`
      })
      Vue.component('ledger', {
        props: ['values'],
        template: '<li><p>{{ values.title }}<span>{{ values.price }}</span></p></li>'
      })
      var checkout = new Vue({
        el: '#checkout-app',
        data: {
          activeDelivery: null,
          deliveryList: [
            { id: 0, price: '£3.99 ', title: 'Home delivery', desc: 'Lorem ipsum dolor sit amet.' },
            { id: 1, price: 'Free ', title: 'Store collection', desc: 'Lorem ipsum dolor sit amet.' },
            { id: 2, price: '£5.99 ', title: 'Precise delivery', desc: 'Lorem ipsum dolor sit amet.' }
          ],
          valuesList: [
            { id: 0, price: '£1233.99', title: 'Order value', desc: 'Lorem ipsum dolor sit amet.' },
            { id: 1, price: '£3.99', title: 'Delivery', desc: 'Lorem ipsum dolor sit amet.' },
            { id: 2, price: '£5.99', title: 'Total', desc: 'Your total including delivery.' }
          ]
        },
      })
  

  ul {
    padding: 0;
  }
  
  ul li {
    list-style-type: none;
  }
  
  .delivery-options li {
    padding: 1rem;
    margin: 1rem;
    border-radius: 3px;
    border: 1px solid grey;
  }
  
  .ledger {
    padding: 1rem;
    margin: 1rem;
    border-radius: 3px;
    border: 1px solid grey;
  }
  
  .active {
    color: red
  }
  

  <script src="https://unpkg.com/vue"></script>
  <div id="checkout-app">
      <ul class="delivery-options">
        <delivery-options
          v-for="option in deliveryList"
          v-bind:deliveries="option"
          v-bind:key="option.id"
          v-bind:is-active="option === activeDelivery"
          v-on:set-active="v => activeDelivery = v">
        </delivery-options>
      </ul>
      <ul class="ledger">
        <ledger
          v-for="value in valuesList"
          v-bind:values="value"
          v-bind:key="value.id">
        </ledger>
      </ul>
    </div>
  

  基本上，使用数据属性跟踪哪个交付是活动的，然后根据它是否是活动交付在组件中设置类 . 要在单击时设置活动传递，组件需要发出一个事件，让父级知道单击了哪个传递 .

  回复于 2024-05-06T07:45:27+08:00