{"action":"closed","issue":{"url":"https://api.github.com/repos/vuematerial/vue-material/issues/1062","repository_url":"https://api.github.com/repos/vuematerial/vue-material","labels_url":"https://api.github.com/repos/vuematerial/vue-material/issues/1062/labels{/name}","comments_url":"https://api.github.com/repos/vuematerial/vue-material/issues/1062/comments","events_url":"https://api.github.com/repos/vuematerial/vue-material/issues/1062/events","html_url":"https://github.com/vuematerial/vue-material/issues/1062","id":261870643,"number":1062,"title":"md-card does not work if enclosed with div or span","user":{"login":"hanxue","id":760008,"avatar_url":"https://avatars1.githubusercontent.com/u/760008?v=4","gravatar_id":"","url":"https://api.github.com/users/hanxue","html_url":"https://github.com/hanxue","followers_url":"https://api.github.com/users/hanxue/followers","following_url":"https://api.github.com/users/hanxue/following{/other_user}","gists_url":"https://api.github.com/users/hanxue/gists{/gist_id}","starred_url":"https://api.github.com/users/hanxue/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hanxue/subscriptions","organizations_url":"https://api.github.com/users/hanxue/orgs","repos_url":"https://api.github.com/users/hanxue/repos","events_url":"https://api.github.com/users/hanxue/events{/privacy}","received_events_url":"https://api.github.com/users/hanxue/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-09-30T20:39:22Z","updated_at":"2017-10-05T17:11:12Z","closed_at":"2017-10-05T17:11:12Z","author_association":"NONE","body":"I am using Vue's interpolator to dynamically generate `md-card` for each item in an array. The code below is from [vuetable-2's Detail Row template](https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-12)\r\n\r\n```html\r\n<template>\r\n    <div @click=\"onClick\">\r\n        <table>\r\n          <tr>\r\n            <td width=\"30%\">\r\n              <div class=\"inline field\">\r\n                  <label>Description: </label>\r\n                  <span>{{rowData.shot_description}}</span>\r\n              </div>\r\n              <!-- more fields here -->\r\n            </td>\r\n            <td width=\"40%\">\r\n              <span v-html=\"displayEachReview(rowData.review, rowData.shot_version_name)\"></span>\r\n            </td>\r\n            <td width=\"30%\">\r\n              <img src=\"assets/card-example.jpg\">\r\n            </td>\r\n          </tr>\r\n        </table>\r\n    </div>\r\n</template>\r\n<script>\r\nexport default {\r\n        displayEachReview(reviews, version_name) {\r\n          var output = \"\"\r\n          for (var review of reviews) {\r\n            output += `<md-card md-with-hover>\r\n                <md-card-header>\r\n                  <div class=\"md-title\">${version_name}</div>\r\n                  <div class=\"md-subhead\">${review.staff_name}</div>\r\n                </md-card-header>\"\r\n                <md-card-content>\r\n                  ${review.review_content}\r\n                </md-card-content>\r\n\r\n                <md-card-actions>\r\n                  <md-button>Update</md-button>\r\n                </md-card-actions>\r\n              </md-card>`\r\n          }\r\n          return output\r\n        }\r\n    },\r\n}\r\n</script>\r\n```\r\n\r\n![image](https://user-images.githubusercontent.com/760008/31049244-c9bd898a-a661-11e7-8743-8e15ccc3fed5.png)\r\n\r\nBecause `<md-card>` is enclosed with `<span v-html=\"displayEachReview()>`, it does not render correctly. I have tried replacing `span` with `div` and other HTML elements, but it does not work. \r\n\r\nIf I do not enclose `<md-card>`  with anything, it actually does work:\r\n```html\r\n            <td width=\"40%\">\r\n              <md-card md-with-hover>\r\n                <md-card-header>\r\n                  <div class=\"md-title\">${version_name}</div>\r\n                  <div class=\"md-subhead\">${review.staff_name}</div>\r\n                </md-card-header>\"\r\n                <md-card-content>\r\n                  ${review.review_content}\r\n                </md-card-content>\r\n\r\n                <md-card-actions>\r\n                  <md-button>Update</md-button>\r\n                </md-card-actions>\r\n              </md-card>\r\n            </td>\r\n            <td width=\"30%\">\r\n              <img src=\"assets/card-example.jpg\">\r\n            </td>\r\n```\r\n\r\n![image](https://user-images.githubusercontent.com/760008/31049268-5b8f9cd6-a662-11e7-85d2-8616f950664f.png)\r\n\r\nHow can I properly insert `md-card` into Vue's interpolator for raw HTML output?\r\n\r\n### Environment\r\nVue: 2.3.4\r\nVue Material: 0.7.4\r\nVuetable-2: 1.6.6\r\n\r\n"}}
{"actor":{"display_login":"hanxue"}}