HTML中的动态计算属性

如何解决HTML中的动态计算属性

我正在使用php根据存储在属性交易中的主要数据数组中每个对象的ID属性在应用程序中创建一组计算属性。因此，我现在已经计算了诸如list_10_deals_cnt，list_20_deals_cnt，list_30_deals_cnt等的属性。现在，如何在循环数据数组的同时使用类Dials__cnt创建这些动态创建的属性？ {{'list_'+el.id+'_deals_cnt'}不能正常工作，它只显示像list_10_deals_cnt这样的字符串，而是显示一个计算值。 附言对不起我的英语。

  <div class="dials" id="app">

    <div class="dials__column" v-for="(el,index) in deals">
        <div class="dials__header">
            <div>{{el.title}}</div>
            <div>сделок: <span class="dials__cnt">{{`'list_'+el.id+'_deals_cnt'`}}</span>,<span></span> руб</div>
        </div>

      <draggable drag-class="draggable-ghost__class" class="dials__block" :list="el.items" group="deal" @change="log(el.id,$event)">
        <div
          class="dials__card"
          v-for="(el,index) in el.items"
          :key="el.title"
        >
          <div class="card__header">
            <div class="card__title">{{ el.customer_name }},{{ el.customer_company_name }}</div>
            <div class="card__date">{{ el.created_at }}</div>
          </div>

          <div class="card__body">
            <a :href="'/deal/detail/'+el.id" class="card__link">{{ el.title }}</a>
          </div>

          <div class="card__footer">
            <span class="card__price">{{ el.price }} руб </span>
            <span v-for="(tag,index) in el.tags" class="card__tag">{{ tag }}</span>
          </div>
        </div>
      </draggable>
    </div>
        
  </div>

    <script>

        new Vue({
            el: '#app',data: {
            deals: <?php echo json_encode($deals,JSON_UNESCAPED_UNICODE); ?>
          },computed: {
            <?php
            foreach ($deals as $k=>$v) {
                echo 'list_'.$v->id.'_deals_cnt: function() {return this.deals['.$k.'].items.length},';
            }
                ?>
          },methods: {
            log: function(id,evt) {
                if (evt.hasOwnProperty('added')) {
                    let dealID = evt.added.element.id;
                    console.log('сделка ID '+dealID+' перемещена в статус '+id+'. Отправляем аякс запрос на обновление статуса в бд');
                    // ajax for update
                }
            }
          }
        });

    </script>

解决方法

嗨

问题1

使用此方法将无法获得计算属性的值

{{`'list_'+el.id+'_deals_cnt'`}}

出于与console.log('vari' + 'able')相同的原因，不会将variable的值输出到控制台。 （Vue将{{ }}之间的任何内容作为表达式求值。）

解决方案

我想，您可以直接在html中使用deals属性，如下所示，而无需使用计算属性

<div class="dials__column" v-for="(el,index) in deals">
<div class="dials__header">
   <div>{{el.title}}</div>
   <div>сделок: <span class="dials__cnt">{{ el.items.length }}</span>,<span></span> руб</div>
</div>
----------- rest of the code

或者您可以基于deals数据属性创建一个计算属性，并使用它来使用v-for在html中循环。

问题2

我不认为以下代码是有效的php字符串。尽管如果您使用上面的第一种解决方案，则变得无关紧要。

<?php
   foreach ($deals as $k=>$v) {
      echo 'list_'.$v->id.'_deals_cnt: function() {return this.deals['.$k.'].items.length},';
   }
?>

'中的['.$k.']应该转义。

解决方案

echo 'list_'.$v->id.'_deals_cnt: function() {return this.deals[\'.$k.\'].items.length},';