fix template check in svg (fix #922)

Author: yyx990803

src/compiler/transclude.js

@@ -25,7 +25,7 @@ exports.transclude = function (el, options) {
   }
   // for template tags, what we want is its content as
   // a documentFragment (for block instances)
-  if (el.tagName === 'TEMPLATE') {
+  if (_.isTemplate(el)) {
     el = templateParser.parse(el)
   }
   if (options && options.template) {

src/directives/if.js

@@ -12,7 +12,7 @@ module.exports = {
       this.end = _.createAnchor('v-if-end')
       _.replace(el, this.end)
       _.before(this.start, this.end)
-      if (el.tagName === 'TEMPLATE') {
+      if (_.isTemplate(el)) {
         this.template = templateParser.parse(el, true)
       } else {
         this.template = document.createDocumentFragment()

src/directives/repeat.js

@@ -28,7 +28,7 @@ module.exports = {
     _.replace(this.el, this.end)
     _.before(this.start, this.end)
     // check if this is a block repeat
-    this.template = this.el.tagName === 'TEMPLATE'
+    this.template = _.isTemplate(this.el)
       ? templateParser.parse(this.el, true)
       : this.el
     // check other directives that need to be handled

src/parsers/template.js

@@ -117,17 +117,16 @@ function stringToFragment (templateString) {
  */
 
 function nodeToFragment (node) {
-  var tag = node.tagName
   // if its a template tag and the browser supports it,
   // its content is already a document fragment.
   if (
-    tag === 'TEMPLATE' &&
+    _.isTemplate(node) &&
     node.content instanceof DocumentFragment
   ) {
     return node.content
   }
   // script template
-  if (tag === 'SCRIPT') {
+  if (node.tagName === 'SCRIPT') {
     return stringToFragment(node.textContent)
   }
   // normal node, clone it to avoid mutating the original

src/util/dom.js

@@ -177,7 +177,7 @@ exports.extractContent = function (el, asFragment) {
   var rawContent
   /* istanbul ignore if */
   if (
-    el.tagName === 'TEMPLATE' &&
+    exports.isTemplate(el) &&
     el.content instanceof DocumentFragment
   ) {
     el = el.content
@@ -193,3 +193,16 @@ exports.extractContent = function (el, asFragment) {
   }
   return rawContent
 }
+
+/**
+ * Check if an element is a template tag.
+ * Note if the template appears inside an SVG its tagName
+ * will be in lowercase.
+ *
+ * @param {Element} el
+ */
+
+exports.isTemplate = function (el) {
+  return el.tagName &&
+    el.tagName.toLowerCase() === 'template'
+}

test/unit/specs/misc_spec.js

@@ -65,4 +65,17 @@ describe('Misc', function () {
     expect(vm.$el.innerHTML).toBe('<div>1</div><div>2</div><div>3</div>')
   })
 
+  // #922
+  it('template repeat inside svg', function () {
+    var el = document.createElement('div')
+    var vm = new Vue({
+      el: el,
+      template: '<svg><template v-repeat="list"><text>{{$value}}</text></template></svg>',
+      data: {
+        list: [1, 2, 3]
+      }
+    })
+    expect(el.innerHTML).toBe('<svg><text>1</text><text>2</text><text>3</text></svg>')
+  })
+
 })