时间戳

首页 > 解决方案 > 如何在我的 Vue.js 应用程序中使用 twig 变量

symfony - 如何在我的 Vue.js 应用程序中使用 twig 变量

问题描述

我的树枝文件如下所示：

<select name="lineItems[{{ product.id }}][quantity]"
          class="custom-select product-detail-quantity-select">
      {% for quantity in range(product.minPurchase, product.calculatedMaxPurchase, product.purchaseSteps) %}
          <option value="{{ quantity }}">
              {{ quantity }}{% if product.packUnit %} {{ product.packUnit }}{% endif %}
          </option>
      {% endfor %}
  </select>

我想将其更改为Vue.js具有数量/计数字段和“增量”和“减量”按钮的应用程序。

我的 Vue.js 应用程序如下所示：

<div id="app">
    <a class="btn" v-on:click="increment">Add 1</a>
    <a class="btn" v-on:click="decrement">Remove 1</a>

    <span>[[ count ]]</span>
  </div>

  <script>

    const App = new Vue({
      el: '#app',
      delimiters: ['[[',']]'],
      data() {
        return {
          count: 1
        }
      },
      methods: {
        increment() {
          this.count++
        },
        decrement() {
          this.count--
        }
      }
    })

  </script>

如果您查看我的 twig 文件，您会看到例如 twig 变量{{ quantity }}。

如何在我的Vue.js应用程序中使用这个 twig 变量？那么当用户将<span>[[ count ]]</span>值增加 3 时。它会将 3 添加到{{ quantity }}变量中？

标签： symfonyvuejs2twigshopware

解决方案

Shopware 没有使用树枝。它使用 twig.js 作为块系统。例如，用于覆盖模板中的某些部分。逻辑必须在 vue 组件中实现。请描述您的全部问题以获取更多信息。

推荐阅读