Symfony 如何在Vue.js应用程序中使用细枝变量

我的细枝文件如下所示：

<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>

<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> 

如果查看my twig文件，您会看到例如twig变量

{{quantity}

---

如何在我的

Vue.js

应用程序中使用此细枝变量？因此，当用户将

[[count]]

值增加3时。它将3添加到

{{quantity}

变量？

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

您不能使用客户端代码更改

twig

变量-解决方法是将其添加为

data

属性，然后在Vue应用程序中读取。