How do I use twig variables in my Vue.js app

  shopware, symfony, twig, vuejs2

My twig file looks like this:

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

I want to change this into a Vue.js app with a quantity/count field and an ‘increment’ and ‘decrement’ button.

My Vue.js app looks like this:

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

If you look at my twig file, you see for example the twig variable {{ quantity }}.

How do I use this twig variable in my Vue.js app? So when the user increment the <span>[[ count ]]</span> value by 3. It add’s 3 to the {{ quantity }} variable?

Source: Symfony Questions

LEAVE A COMMENT