Merge pull request #50 from tronsha/bugfix/template-string-expression

Fix expression code output in template strings

Author: Macavity

src/Compiler.php

@@ -387,11 +387,14 @@ private function handleAttributeBinding(DOMElement $node)
                  */
                 $templateStringContent = $matches['content'];
 
-                $templateStringContent = preg_replace(
-                    '/\$\{([^}]+)\}/',
-                    '{{ $1 }}',
-                    $templateStringContent
-                );
+                preg_match_all('/\$\{([^}]+)\}/', $templateStringContent, $matches, PREG_SET_ORDER);
+                foreach ($matches as $match) {
+                    $templateStringContent = str_replace(
+                        $match[0],
+                        '{{ ' . $this->builder->refactorCondition($match[1]) . ' }}',
+                        $templateStringContent
+                    );
+                }
 
                 $dynamicValues[] = $templateStringContent;
             } else {

tests/fixtures/vue-bind/binding-with-template-string-3.twig

@@ -0,0 +1,5 @@
+<div class="block {{class|default('')}}">
+  <div style="width: {{ 100 / items|length }}%;">
+    Hello World
+  </div>
+</div>

tests/fixtures/vue-bind/binding-with-template-string-3.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="block">
+    <div :style="`width: ${100 / items.length}%;`">
+      Hello World
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+      props: {
+        items: {
+              type: Array,
+              required: true,
+          },
+      },
+  };
+</script>