Fix #47

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 {
@@ -404,7 +407,7 @@ private function handleAttributeBinding(DOMElement $node)
             }
 
             $node->setAttribute(
-                $name,
+                $name === 'src' ? Replacements::getSanitizedConstant('SRC_ATTRIBUTE_NAME') : $name,
                 $this->implodeAttributeValue($name, $dynamicValues, $staticValues)
             );
         }

src/Models/Replacements.php

@@ -12,6 +12,7 @@ abstract class Replacements extends BasicEnum
     public const SMALLER = '<';
     public const AMPERSAND = '&';
     public const PIPE = '|';
+    public const SRC_ATTRIBUTE_NAME = 'src';
 
     /**
      * Removes all instances of replacements from target

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>

tests/fixtures/vue-bind/bindings-src.twig

@@ -0,0 +1,3 @@
+<div class="{{class|default('')}}">
+  <img src="{{isBool ? varA : varB}}">
+</div>

tests/fixtures/vue-bind/bindings-src.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <img :src="isBool ? varA : varB">
+  </div>
+</template>