如何避免VueJS删除DOM中的props属性？

Question

我在正确传递给组件的组件上有prop。该值在组件内正确设置。但是在VueJS的编译时删除了该属性。 （我猜）

如何避免删除该属性？在运行时，我需要能够获得具有相同属性的每个元素，如：$("[group-name=' + vm.groupName + ']");

这是DEMO

HTML

<script type="x-template" id="my-component-tpl">
  <div>My Component's group name is <b>{{groupName}}</b>.</div>
  <div>But the attribute 'group-name' is no longer in the DOM...</div>
</script>

<div id="app">
  <my-component group-name="Demo"></my-component>
</div>

JS

var myComponent = {
  template: '#my-component-tpl',
  props: ['groupName']
};

new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
});

Answer 1

除了我个人认为你应该使用一个非标准属性的类这一事实 - 你必须在模板中再次将它添加到根元素。

<script type="x-template" id="my-component-tpl">
  <div v-bind:group-name="groupName">
    My Component's group name is <b>{{groupName}}, and the outer div also has the correspondign attribute now.</b>
   </div>
</script>

Answer 2

我解决了你的问题。 （实现@LinusBorg所说的）

http://jsfiddle.net/gurghet/8xwm9LmL/1/

侧面注意：请记住，当您设置replace: true时（这是默认设置，因此，如果不设置它，则将其设置为true）告诉Vue用您的组件替换您的组件，在这种情况下<my-component>...</my-component>。如果您不喜欢此行为，请设置replace: false。